element使用upload组件时,增加覆盖第一个文件功能

2020-09-10  本文已影响0人  Poppy11

首先使用组件,这里记住就不要使用limit了,file-list是关键

<el-upload
    v-else
    class="upload"
    :drag="true"
    action=""
    :multiple="true"
    ref="upload"
    accept='.mm'
    :file-list="fileList"
    :auto-upload="false"
    :on-change="onChangeToolFile"
    :before-remove="beforeRemove"
    :on-remove="onRemoveFile"
  >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  </el-upload>
onChangeToolFile每次上传文件的时候都会触发这个方法,这时候我们就获得了fileList,也就是上传文件的列表,每次取最后一个文件就好了,然后赋值给我们自定定义在data里面的fileList。需要触发上传任务的时候, 取this.fileList[0]这里面的文件就好。
onChangeToolFile(file, fileList){
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1].raw]  // 这一步,是 展示最后一次选择的文件
        }
      },

      // 移除文件之前
      beforeRemove(file, fileList) {
        return this.$msgbox.alert(`确定移除 ${file.name}?`)
      },

      // 移除文件
      onRemoveFile(file, fileList) {
        this.upFileList = []
        for (let x of fileList) {
          if (x.raw) {
            this.upFileList.push(x.raw)
          }
        }
      },

上一篇下一篇

猜你喜欢

热点阅读