React中如何获取文件真实路径？解决C:\fakepath\显示问题

首先明确：你不可能获取到用户本地文件的真实完整路径，这是浏览器的安全机制限制，目的是防止泄露用户的本地文件系统结构，C:\fakepath\开头的路径是浏览器刻意返回的伪路径，这个限制无法绕过。

但你完全不需要真实路径来完成文件上传——上传文件的核心是传递文件内容，而非路径。React中正确的做法是直接使用event.target.files获取File对象，用这个对象来完成上传操作。

示例代码 #

1. 获取File对象并准备上传：

<input 
  onChange={(event) => {
    // 获取选中的第一个文件
    const selectedFile = event.target.files[0];
    if (selectedFile) {
      // 可以获取文件名、类型、大小等信息
      console.log('文件名:', selectedFile.name);
      console.log('文件类型:', selectedFile.type);
      // 调用上传函数
      handleFileUpload(selectedFile);
    }
  }} 
  type="file" 
  id="file_input" 
/>

2. 实现上传函数（以fetch为例）：

const handleFileUpload = (file) => {
  // 创建FormData对象，用于包装文件
  const formData = new FormData();
  // 将文件添加到FormData，'file'对应后端接收的字段名
  formData.append('file', file);

  // 发送POST请求到后端接口
  fetch('/your-upload-api-endpoint', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(result => {
    console.log('上传成功:', result);
    // 这里可以处理上传成功后的逻辑，比如更新状态、提示用户等
  })
  .catch(err => {
    console.error('上传失败:', err);
    // 处理上传失败的情况
  });
};

关键说明 #

• 后端只需要接收FormData中的文件内容，不需要知道文件在用户本地的路径，浏览器会自动负责把文件数据传输给后端。
• 如果用Axios上传，逻辑类似，只需要把FormData作为请求体发送即可，注意不需要手动设置Content-Type，Axios会自动处理。

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