elementUI+Vue,使用ref区分不同的el-upload,清除其缓存保证能够多次上传选择文件。(多个el-upload时注意区分
需求:在表格中嵌套使用多个el-upload组件,可能会需要多次选择。问题分析:单独使用el-upload时,想要在隐藏上传列表的条件下实现多次上传,就需要在每次选中文件时清除上次选择的文件缓存。使用this.$refs.[refname].clearFiles();举例:<el-uploadref="picupload"class="avatar-uploader"action="#
·
需求:在表格中嵌套使用多个el-upload组件,可能会需要多次选择。
问题分析:
单独使用el-upload时,想要在隐藏上传列表的条件下实现多次上传,就需要在每次选中文件时清除上次选择的文件缓存。
使用this.$refs.[refname].clearFiles();
举例:
<el-upload
ref="picupload"
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-change="picchange"
:limit="1"
:auto-upload="false"
>
<img
v-if="dialogform.imgsrc"
:src="dialogform.imgsrc"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<span slot="tip" class="el-upload__tip"
>只能上传jpg/png文件,且不超过2M</span
>
</el-upload>
method:
picchange(file) {
this.$refs.picupload.clearFiles();
const isJPG =
file.raw.type === "image/jpeg" || file.raw.type === "image/png";
const isLt2M = file.raw.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("上传图片大小不能超过 2M!");
return false;
} else if (!isJPG) {
this.$message.error("上传图片格式只能是jpg或png");
return false;
} else {
this.dialogform.imgsrc = URL.createObjectURL(file.raw);//用来显示
this.picupload = file.raw;//用来储存
}
},
在表格中使用el-upload组件,由于同一个表格中使用了多了el-upload,单一的ref并不能区分它们,此时clearFiles()方法失效。
在网上看了很多方法感觉都好复杂,大多是修改源码传参的方法。这里我还看到另一位仁兄也是在表格中使用的,他还提到另一种要绑定file-list方法,我有想过但还是觉得有点麻烦。但是感觉很有用,所以推荐一下:页面中使用多个element-ui upload上传组件时绑定对应元素
而我这边暂时需求不高,所以决定使用动态传参给不同el-upload起不同的名字,再对应进行清除。代码如下:
<el-table-column prop="" label="值">
<template slot-scope="scope">
<el-upload
:ref="tableName + scope.$index"
class="upload-demo"
:limit="1"
action="#"
:show-file-list="false"
:on-change="choicefile"
:auto-upload="false"
>
<el-input
v-model="scope.row.value"
@focus="handleUpload(scope.$index)"
></el-input>
</el-upload>
</template>
</el-table-column>
<script>
export default {
name: "",
props: [tableName],
data() {
return {
uploadName: "upload",
};
},
watch: {},
created() {},
methods: {
//出发上传文件的方法
handleUpload(index) {
this.uploadName = this.paraDataName + index;
},
choicefile(file) {
//清除缓存才能多次选择
this.$refs[`${this.uploadName}`].clearFiles();
// console.log(file);
。。。自己写的上传方法内容
},
},
};
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)