avue 使用 elemeui 的 el-upload

一、使用默认的action上传

<el-upload
  action="/api/blade-dpms/doc/upload"
  list-type="picture-card"
  :headers="headerData"
  :limit="9"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-success="success"
  :file-list="filelist"
>
  <i class="el-icon-plus"></i>
</el-upload>

效果如图：

直接反显的图片数据如第0条，上传的图片数据如第2条；

操作要点：
1. 上传图片，取返回值id，组成uploadList，作为保存时eventPhoto入参；
2. 反显图片，取返回值列表中的数组，组成filelist作为反显图片的数组；
3. 移除图片，确定移除的是哪张图片，移除uploadList中对应的id；

难点：
- 移除图片
1. 新增时，上传几张图片，移除其中的某一张
2. 打开编辑时，直接移除其中的某一张
3. 打开编辑后，有几张反显图片，此时新增几张图片，再把反显中的和新增的图片各删除一张
以上情况要求保留图片本身的顺序不变，不可错删。

操作思路：
通过 uid 来判断删除哪一张：
新增时，每次上传一张照片后，在 uidList 中 push 一次该照片的 uid，同时在 picIdList 中 push 一次照片上传后的返回的该照片在数据库的 id；删除照片时，on-remove 方法中的 file 就是被删除的哪一张照片，file 中有 uid，判断该 uid 在 uidList 中的下标，删除 picIdList 中对于的图片即可。
编辑时，先通过给 fileList 赋值接口的返回值作为回显，再将 uidList 中 push fileList 中的 uid，在picIdList 中 push 回显图片的 id，后续操作同新增时。
注：编辑时，将 uidList 中 push fileList 中的 uid，这一步在生成 fileList 后直接操作是拿不到 uid 的，uid 不是接口返回的，是放在 el-upload 组件中后生成的，所以要在删除图片的回调或上传成功的回调中生成，且不可重复生成 uidList，故要做判断，代码示例如下：

    handleRemove(file, filelist) { // file 为被删除的那个，filelist 为剩下的图片的数组
      if (this.filelist && this.initEdit && this.uidList.length === 0) {
        this.initEdit = false;
        this.filelist.forEach(item => {
          this.uidList.push(item.uid);
        });
      }
      let delId = this.uidList.indexOf(file.uid);
      if (delId < 0) {
        this.$message({
          type: "error",
          message: "出错!"
        });
        return;
      }
      // console.log(delId);
      this.uidList.splice(delId, 1);
      this.uploadList.splice(delId, 1);
 },
success(res, file) { // 此处 res 为上传后的返回值，file 为上传的文件
      if (res.data.id) { // 上传成功判断
      	// this.initEdit && this.uidList.length 是用来判断 uidList 是在点击开编辑后第一次给 uidList 赋值，然后删除或上传图片都不需要再赋回显的值了
        if (this.filelist && this.initEdit && this.uidList.length === 0) {
          // 给 uidList 赋予回显的值
          this.filelist.forEach(item => {
            this.uidList.push(item.uid);
          });
        }
        this.uidList.push(file.uid);
        this.uploadList.push(res.data.id);
      }
    },

2、使用自定义上传的方式：http-request