React.js自定义文件输入组件 选中后显示文件名/路径实现方法

注意：受浏览器安全策略限制，网页端无法获取用户本地文件的完整绝对路径，仅能读取到选中文件的文件名。

核心实现逻辑：通过React状态存储选中的文件名称，给隐藏的文件选择框绑定变更监听事件，用户选完文件后把文件名同步到状态，再将状态值绑定到路径展示的文本输入框上即可。

修改后的完整可运行代码：

import { useState } from 'react';

function DataExtractor(){
  // 定义状态存储输出路径值
  const [outputPath, setOutputPath] = useState('');

  const uploadFiles = () => {
    document.getElementById('selectFile').click()
  }

  // 监听文件选择操作
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setOutputPath(file.name);
      // 此处可直接复用你之前写好的文件上传逻辑，file就是选中的文件对象
    }
  }

  return(
    <>
      <div>
        <label>Set Output Path:</label>
        <input 
          type="text" 
          placeholder="Set output path" 
          value={outputPath}
          readOnly
        />
      </div>
      <div>
        <button className="btn-1" onClick={uploadFiles}>Browse path</button>
        <input 
          type="file" 
          id="selectFile" 
          style={{display: "none"}}
          onChange={handleFileChange}
        />
      </div>
    </>
  )
}
export default DataExtractor

补充说明 #

• 路径展示的输入框添加了readOnly属性，默认和系统路径选择交互一致，不允许用户手动编辑，如果需要支持手动输入路径，直接移除该属性即可
• 如果需要支持多文件选择，遍历e.target.files拿到所有文件对象，把文件名拼接后赋值给outputPath即可
• 如果你需要展示自定义的路径别名、或者上传后服务端返回的存储路径，只需要在拿到对应值的时候调用setOutputPath更新状态，输入框内容就会自动同步

内容的提问来源于stack exchange，提问作者Nikita.S