element上传图片组件，删除指定图片

element上传图片组件，删除指定图片

              <el-form-item label="处理图片：" :label-width="formLabelWidth">
                <div>注:缩略图建议尺寸: 800*600(4:3)</div>
                <el-upload
                  class="tupia"
                  :action="importFile"
                  list-type="picture-card"
                  :limit="3"
                  :on-exceed="exceedFile"
                  :file-list="upImgObj.fileList"
                  :on-success="fileSucces"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="preImg">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item>

this.temp.fileIds为向后端传的图片id集合

data(){
	      //表单数据
      temp: {
        eventId: "",
        name: "",
        dealContent: "",
        fileIds: [],
        delName: "",
      },
}

逻辑为图片上传成功后，在成功的回调函数fileSuccess()中将后端返回的图片id拿到，然后放进一个数组里（这里就是this.temp.fileIds），在点击删除时会调用handleRemove(),在这个函数里将this.temp.fileIds里存的图片id与删除回调函数里file对象下的id做比较，如果相同的话则在数组里将这个id删掉，最后this.temp.fileIds里剩下的id就是剩下图片的id，在给后端传过去就行了

    handleRemove(file, fileList) {
      for (let i = 0; i < this.temp.fileIds.length; i++) {
        if (this.temp.fileIds[i] == file.response.data.data.id) {
          this.temp.fileIds.splice(i, 1);
          break;
        }
      }
    },
    fileSucces(file, fileList) {
      this.temp.fileIds.push(fileList.response.data.data.id);
    },