elementUI 多文件上传只执行一次onSuccess的解决方法

来源

使用两个fileList变量,一个赋值给组件只做展示用,一个实际作为新增/删除/上传使用.

• 使用组件

   <el-upload class="upload" action="url" name="files" :file-list="uploadList" :on-error="errUpload" :on-preview="handlePreview" :on-success="handleSuccess" :on-remove="handleRemove" multiple :limit="uploadLimit" :on-exceed="handleExceed" list-type="picture" size="small">
              <el-button type="success" size="small" plain>选择图片</el-button>
              <div slot="tip" class="el-upload__tip" style="height: 20px"> 只能上传jpg/png文件，且不超过500kb</div>
              <div slot="tip" class="el-upload__tip">默认第一张为封面,点击将图片设置为第一张</div>
            </el-upload>

• 定义列表

  // 上传文件列表
  uploadList: [],
  realFileList: [],

• 操作

  handleRemove(file, fileList) {
      let list = this.realFileList;
      let len = this.realFileList.length;
      for (let i = 0; i < len; i++) {
        if (file.name == list[i].name) {
          list.splice(i, 1);
          break;
        }
      }
    },
    handlePreview(file) {
      let list = this.uploadList;
      let len = this.uploadList.length;
      for (let i = 0; i < len; i++) {
        if (file.name == list[i].name) {
          list.unshift(file);
          list.splice(i + 1, 1);
          break;
        }
      }
    },
    handleSuccess(res, file, fileList) {
      let arr = [];
      fileList.forEach((item) => {
        let obj = {};
        if (item.response) {
          obj.name = item.response.data[0].fileName;
          obj.url = item.response.data[0].fileSrc;
          obj.fileId = item.response.data[0].fileId;
        } else {
          obj.name = item.name;
          obj.url = item.url;
          obj.fileId = item.fileId;
        }
        arr.push(obj);
      });
      this.realFileList = arr;
    },