在vue的项目中做图片上传时,我通过上传图片后获取到input中的files属性将其进行处理,然后将其转换为base64传给后台。这个方法用在非v-for上动态生成的ref上时,可以通过 this.$refs.name.files[0]获取到相关元素,但是将这个方法用在v-for动态上传的列表中,而且ref也是通过动态生成的时候就获取不到目标元素的files。结论在最后,可以直接看。
我单独上传图片的方法是
uploadImg(refName) {
let file = this.$refs[refName].files[0];
let that = this;
let reader = new FileReader();
let imgUrlBase64;
if (file) {
imgUrlBase64 = reader.readAsDataURL(file);
let name = file.name.split(".");
reader.onload = function(e) {
let imgFile= reader.result.substring(
reader.result.indexOf(",") + 1
);
let obj = {
img: [
{
originalFileName: name[0],
fileExtension: "." + name[1],
fileContent: imgFile
}
]
};
that.$axios
.post("www.baidu.com", {
obj: JSON.stringify(obj)
})
.then(res => {
let _data = res.data.xxx;
if (_data.xxx== "1") {
let imgURL = _data.img;
that.imgList.push(imgURL);
}
})
.catch(err => {
console.log(err);
});
};
}
}
该方法在不是通过v-for生成的ref时,可以正常使用,但是将这个方法用在v-for动态上传的列表中,而且ref也是通过动态生成的时候就遇到了问题。
template中的代码是:
<ul>
<li v-for="(item, index) in list" :key="index">
<title>{{item.name}}</title>
<input
type="file"
accept="image/png, image/gif, image/jpeg"
:ref="'img' + index"
@change="uploadImg('img' + index)"
>
</li>
</ul>
经过一番排查之后,我发现这个问题是ref的问题: 当template中直接使用ref时,它会直接返回ref,但是template中这个ref是在v-for中动态生成时,它返回的是一个数组,必须通过 this.$refs[refName].files[0]才可以获取到对应的元素。所以上面的方法在加一个判断即可实现。
使用 React 时,我们的默认思维方式应该是 不会强制修改 DOM ,而是通过传入 props 重新渲染组件。但是,有些情况却无法避免修改 DOM 。React 中的 Refs 提供了一种访问 render() 方法
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例
大多数情况下,props前递可以解决一切问题,但是依然有需要触达React实例或者Dom节点的情况,这时候应该使用React Ref。React.forwardRef((props,ref)=><Compnent>)
目标是做一个向下滚动时到底自动加载的table效果。实现的思想其实很简单,就是获取到table里的tbody,然后滚动时计算下滚动高度,差不多到底了就加载更多。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!