vue upload 上传文件之删除文件

在做图片上传时，用Element UI 组件库 upload组件，图片上传时通过文档流的形式，例如下面代码中的action的地址，需要提前协商好，但是Vue官网对删除只介绍了其中的一些并没有实现图片的删除功能，

 handleRemove(file, fileList) {
   console.log(file, fileList);
 },

那么接下来看看在项目中怎么实现的吧

1. 首先自己手写了一个删除的方法，循环遍历外边的一层
2. 当点击 ‘X’时，获取当前文件的图片路径，和之前的图片List进行比较做处理
   

<div
 v-for="item in dataForm.imageUrl"
 :key="item"
 style="position: relative;float:left;margin:20px 10px"
>
 <img :src="item" class="avatar" />
 <i
   class="el-icon-close"
   @click="deleteClick(item)"
   style=" position: absolute;top: -8px; left: 60px; cursor: pointer;"
 ></i>
</div>

在删除方法中代码实现

let newArray = [];
  this.dataForm.imageUrl.forEach(i => {
    if (i != item) {
      newArray.push(i);
    }
    this.dataForm.imageUrl = newArray;
  });

最后实现的效果

希望对大家有所帮助~