【踩坑记】记录 input 上传文件夹 change 事件失效的问题

问题

在 vue 里使用 input[type=file] ：

<button size="small" type="weak" title="选择文件夹" @click="$refs.directoryInput.click()">
  选择文件夹
</button>
<input ref="directoryInput" type="file" multiple="multiple" 
       webkitdirectory="webkitdirectory" style="display: none;" 
       @change="handleDirectoryInput">

handleDirectoryInput(){
   const { files } = event.target;
   this.filesDeal(files);
}

点击上传并处理了一次文件后，再次点击上传相同文件夹会没有响应。

解决方案

上传成功后清空 input[type=file] 元素中的内容即可反复上传相同的文件/文件夹。

handleDirectoryInput(){
   const { files } = event.target;
   this.filesDeal(files);
   this.$refs.directoryInput.value = '';
}