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

来源

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

• 使用组件

   
              选择图片
              
   只能上传jpg/png文件，且不超过500kb
              
  默认第一张为封面,点击将图片设置为第一张
            

• 定义列表

  // 上传文件列表
  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;
    },