typescript - Vue 文件上传 - 连续上传相同的文件

我正在尝试为聊天应用制作文件上传功能。我的 HTML 看起来像这样：（我不使用表单）

 <span class="file-attach mr3">
  <input id="uploadFile" name="uploadFile" type="file" @change="attachFile($event.target.files)" multiple>
  <i class="w-10 ml4 icon-attach"></i>
</span>

我的 TypeScript 文件看起来像这样：

 async attachFile(files) {
if (!files.length) {
  return
}
const reader = new FileReader()
reader.addEventListener('loadend', () => {
  this.mediaLinkDocument = {
    title: this.file.type.indexOf('image') !== -1 ? '' : this.file.name,
    type: this.file.type,
    size: this.file.size,
  }
  this.sendFile(this.file)
})

Array.from(Array(files.length).keys()).forEach((id) => {
  console.log(files[id])
  this.file = files[id]

  if (this.file.size > MAX_ATTACHMENT_SIZE) {
    alert('O tamanho máximo é de 20 MB')
    this.file = undefined

    return
  }
  reader.readAsDataURL(this.file)
  files = {}
})

}

上传可以正常工作，但如果用户上传相同的图片，它不会触发 @change 回调，并且文件不会被上传。有人能帮我吗？

答案＃1

所以在做了一些研究之后（见评论），我和提问的作者发现，如果你选择同一个文件两次，Chrome 不会触发 change 事件。而 Firefox 会。因此我建议他在上传事件触发后，将字段的值设置为空字符串。这样当他再次选择同一个文件时，就会被视为一次更改。

答案＃2

Google Chrome 对同一个文件没有触发 change 事件。为了解决这个问题，我在 vuejs 中按如下方式操作

<input
   ref="ExcelfileUpload"
   type="file"
   multiple="false"
   id="sheets"
   @change="onchangeOpenOrderUpload"
/> 



onchangeOpenOrderUpload(e) {
    ... codes
    this.$refs.ExcelfileUpload.value = "";
}