需求:在表格中嵌套使用多个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>
Logo

前往低代码交流专区

更多推荐