Question

我正在尝试为聊天应用制作文件上传功能。我的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>

我的打字稿文件如下：

 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回调，也不会上传文件。任何人都可以帮助我吗？

Answer 1

因此，经过一些研究（见评论）后，我自己和问题的作者发现，如果您选择两次相同的文件，Chrome将不会触发更改事件。 Firefox确实如此。所以我建议他在触发上传事件后简单地将字段的值设置为空字符串。这样，当他再次选择同一个文件时，它将被视为一个变化。

Answer 2

Google Chrome 未在同一文件上触发更改事件。为了解决这个问题，我在 vuejs 上做了以下操作

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



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

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

2 个答案: