使用el-upload文件缩略图 删除指定图片

饿了吗ui的文档上面的删除只给了一个方法，没有具体的操作。
百度上的有些方法是只能删除全部图片

//获取上传组件的ref删掉他的全部数据
this.$refs.upload.clearFiles()

但是后面发现这样写不行，对用户太不友好了
所以后面又用这一种写法实现了指定删除
使用ref的uploadFiles 获取当前组件中的图片数据

 let arr = this.$refs.upload.uploadFiles

在通过indexOf来获取当前指定图片的索引值

let index = arr.indexOf(file)

最后通过splice删除

 console.log(index)
 arr.splice(index, 1)

主要的逻辑代码
js

   handleRemove(file) {
      //使用indexOf把点击的图片的索引位置找出来删掉
      let arr = this.$refs.upload.uploadFiles
      let index = arr.indexOf(file)
      console.log(index)
     arr.splice(index, 1)
    },

组件

   <el-upload
                action="#"
                list-type="picture-card"
                :on-change="handleChange"
                :before-upload="beforeAvatarUpload"
                :auto-upload="false"
                :file-list="fileList"
                ref="upload"
                :on-exceed="masterFileMax"
                :limit="limit"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <!--显示上传图片 -->
                  <img class="el-upload-list__item-thumbnail img" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>