React 文件上传后无法再次上传

2025-02-11

#react

前几天碰到一个 Bug，就是文件上传之后，不能再次上传了，除非刷新页面。最初的代码是类似这样子的

 <input
      type="file"
      onChange={event => {
        const files = event.target.files;
        if (files == null) {
          return;
        }
      }}
      multiple
      accept=".png,.jpg,.jpeg"
/>

最后找到解决方案了，方案很简单，只需要在最后将 event.target.value 设置为 '' 就好了

 <input
      type="file"
      onChange={event => {
        const files = event.target.files;
        if (files == null) {
          return;
        }
       // 其他的逻辑
        event.target.value = ''
      }}
      multiple
      accept=".png,.jpg,.jpeg"
/>

很简单的问题，但是没有碰到过，完全没有思路。。。

参考文档

react cannot use fileinput twice without refreshing the page