Vue 使用elementUI upload 删除图片/移除图片

组件渲染

<el-upload
  :action="actionUrl"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :headers="headerObj"
  list-type="picture"
    :on-success="handleSuccess">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

里面的

:on-remove="handleRemove"

就是删除事件
绑定后的js操作

  handleRemove(file){
  // 1.获取将要删除图片的临时路径
      const filePath = file.response.data.tmp_path
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.formData.pics.findIndex(x => x.pic === filePath)
      // 3.调用splice方法，移除图片信息
      this.formData.splice(i, 1)
   },