关于vue.js: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;
    },