React中如何获取input type=file控件传入的上传文件

给<input type="file">绑定onChange回调时，回调的第一个入参是DOM事件对象，用户选中的文件就存储在该对象的target.files属性上：

• 未加multiple属性的单文件选择模式：event.target.files[0]就是用户选中的单个File对象
• 加了multiple属性的多文件选择模式：event.target.files是类数组结构的FileList，包含本次选中的所有文件

注意不要用function作为函数名，这是JavaScript的保留关键字，会引发语法错误，可替换为自定义名称比如handleFileChange，完整实现代码如下：

// 多文件选择场景记得给input加multiple属性
<input type="file" multiple onChange={handleFileChange} />

const handleFileChange = (e) => {
  // 拿到本次选中的文件集合
  const selectedFiles = e.target.files;
  // FileList是类数组，先转成普通数组再遍历
  Array.from(selectedFiles).forEach(file => {
    // 如果你维护的listOfFiles是Set结构就用add，是数组就换成push
    listOfFiles.add(file);
  });

  // 可选：重置input值，避免下次选同名同内容文件时不触发onChange
  e.target.value = '';
}

补充说明：event.target.files返回的FileList是只读结构，不能直接调用数组的遍历、过滤方法，必须先通过Array.from()或者展开运算符转成普通数组后再操作。

内容的提问来源于stack exchange，提问作者aj soprano