【实操】vue2项目中 vant Uploader组件删除时获取下标

场景：上传多个图片一起提交。图片上传时将接口返回的服务器图片链接存到了自定义的数组中，当删除时需要获取下标删除数组中相应的数据。

 <van-uploader
    v-model="fileList"
    :after-read="afterRead"
    multiple
    @delete="(file, detail) => deleteImg(file, detail)"
/>

  
 async afterRead(e) {
   let _this = this
   e.status = 'uploading'
   e.message = '上传中...'

   let fd = new FormData()
   fd.append('file', e.file)

   let res = await api.upLoadFile(fd)
   if (res) {
     if (res.resp_code === 0) {
       e.status = 'success'
       e.message = '上传成功'
       _this.imageList.push(res.datas.foreignPath)
     } else {
       _this.$toast(res.resp_msg)
     }
   } else {
     e.status = 'failed'
     e.message = '上传失败'
     _this.imageList.push('')
     return ''
   }

},

// 在 detail 中获取下标
deleteImg(file, detail) {
  this.imageList.splice(detail.index, 1)
},