el-upload删除缩略图

应业务需求：

采用技术： vue + element

问题: 1、需要实现手动上传 。 2、需要进行一个缩略图删除。

这个过程发现的问题：1、缩略图显示的是一个数组列表 2、上传的文件其实又是一个数组

上代码:

<div class="sctp_container" v-show="imgShow">
        <div class="guanbi" @click="imgHidden"></div>
        <div>
          <div class="scsp_title">{{ "上传图片" }}</div>
          <el-upload
            action=""
            list-type="picture-card"
            ref="uploadImage"
            :on-change="uploadImgChange"
            :on-exceed="uploadImgExceed"
            accept=".png,jpg,.jpeg"
            :limit="9"
            :auto-upload="false"
            multiple
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              //删除的遮罩
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemoveImage(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
      </div>

//数据：
uploadImages: {
        file: [],
        itemId: this.resourceId,
      },
//方法：
uploadImgExceed() {
      this.$message({
        message: "最多只能上传9张图片",
        type: "warning",
        center: true,
        offset: 100,
      });
    },
    uploadImgChange(file, fileList) {
      if (fileList.length > 9) {
      }
      this.uploadImages.file = [];
      fileList.forEach((item) => {
        this.uploadImages.file.push(item.raw);
      });
    },
    async _uploadImage() {
      let uploadImageForm = new FormData();
      this.uploadImages.file.forEach((item) => {
        uploadImageForm.append("file", item);
      });
      uploadImageForm.append("itemId", this.uploadImages.itemId);
      try {
        const { data: res } = await uploadImage(uploadImageForm);
        if (res.code == 200) {
          this.$message({
            message: "上传图片成功",
            type: "success",
            center: true,
            offset: 100,
          });
          this.uploadImages.file = [];
          this.$refs.uploadImage.clearFiles();
        } else {
          this.$message({
            message: "上传图片失败",
            type: "error",
            center: true,
            offset: 100,
          });
        }
      } catch (error) {
        this.$message({
          message: "上传图片失败",
          type: "error",
          center: true,
          offset: 100,
        });
      }
    },
    handleRemoveImage(file) {
    //缩略图列表跟上传文件列表并不一致
      this.$refs.uploadImage.handleRemove(file); //删除缩略图
      this.uploadImages.file.splice(
        this.uploadImages.file.indexOf(file.uid, 1) //在上传文件列表中删除这个文件
      );
    },

1、因为是手动上传：before-upload 上传文件之前的钩子，失效不能用只能用on-change文件上传的钩子。

==2、this.$refs.uploadImage下会有很多的方法：clearFiles方法是在缩略图状态下删除所有显示的缩略图列表（并不是上传的文件列表） handleRemove方法是移除选中的缩略图（但是并没有改变上传文件列表） ==

有任何问题，希望来扰，多多交流