如何使用React.js实现多文件上传并显示选中文件名？附代码问题咨询

我来帮你排查代码里的问题，然后给出修正方案：

你的代码里的几个关键问题： #

1. 事件绑定位置错误：你把onChange绑定在了<label>标签上，但文件选择的change事件是属于<input type="file">元素的，label只是用来触发input的点击，不需要绑定事件。
2. 文件名处理错误：Array.from(event.target.files[0].name)会把第一个文件的名字（字符串）拆成单个字符的数组，而且只取了第一个文件的名字，完全不符合你要展示所有文件名的需求。
3. multiple属性位置错误：这个属性是用来允许input选择多个文件的，必须加在<input>标签上，放在label上是无效的。

修正后的完整代码示例 #

首先，先修正你的事件处理方法和DOM结构，再添加文件名展示的UI：

// 类组件的构造函数，初始化state
constructor(props) {
  super(props);
  this.state = {
    selectedFile: [],
    selectedFileName: []
  };
}

onFileChange = (event) => { 
  if (event.target.files && event.target.files.length > 0) { 
    // 将FileList转为数组，方便后续操作
    const selectedFiles = Array.from(event.target.files);
    // 提取所有文件的名字，组成新数组
    const selectedFileNames = selectedFiles.map(file => file.name);
    
    this.setState({ 
      selectedFile: selectedFiles, 
      selectedFileName: selectedFileNames, 
    }); 
  } 
  document.getElementById("fileUpload").classList.remove("fileUpload"); 
}; 

// render方法里的JSX
render() {
  return (
    <div>
      {/* 修正后的上传触发区域 */}
      <label htmlFor="fileUpload"> 
        点击选择多个文件
        <input 
          id="fileUpload" 
          style={{visibility:"hidden"}} 
          type="file" 
          multiple  // 移到input上，开启多文件选择
          onChange={this.onFileChange}  // 事件绑定到input
        />
      </label>

      {/* 展示所有选中的文件名 */}
      {this.state.selectedFileName.length > 0 && (
        <div style={{marginTop: '16px'}}>
          <h4>已选择文件：</h4>
          <ul>
            {this.state.selectedFileName.map((fileName, index) => (
              <li key={index}>{fileName}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

关键修正点说明： #

• 事件绑定：把onChange移到<input>上，这样当用户选择文件后，才能正确触发事件处理函数。
• 文件名数组生成：用map遍历所有选中的文件，提取每个文件的name属性，得到包含所有文件名的数组，这样就能在UI里渲染出来。
• multiple属性：放在input上后，用户就能按住Ctrl/Command选择多个文件了。
• UI展示：通过条件渲染，当有选中文件时，用列表展示所有文件名，清晰直观。

这样修改后，点击label选择多个文件，所有选中的文件名就会正确显示在界面上啦～

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