如何在React中实现本地文件上传至浏览器时显示进度条及上传百分比

你需要借助XMLHttpRequest的上传进度监听能力，结合React状态存储进度值，即可实现进度展示，具体实现步骤如下：

• 新增两个状态：selectedFile 存储用户选中的文件，uploadPercent 存储实时上传百分比
• 给文件选择框绑定onChange事件，记录用户选中的文件
• 在提交逻辑中使用XHR发起上传请求，监听upload对象的progress事件，实时计算并更新进度
• 在视图层渲染进度值或进度条

完整实现代码如下：

import { useState } from 'react';

export default function App() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [uploadPercent, setUploadPercent] = useState(0);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
    // 每次选择新文件时重置进度
    setUploadPercent(0);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!selectedFile) return alert('请先选择文件');

    const formData = new FormData();
    formData.append('uploadFile', selectedFile);

    const xhr = new XMLHttpRequest();
    // 替换为实际的后端上传接口地址
    xhr.open('POST', '/your/upload/api');

    // 监听上传进度事件
    xhr.upload.addEventListener('progress', (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        setUploadPercent(percent);
      }
    });

    // 上传完成回调可根据业务需求自行扩展
    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log('上传成功');
      } else {
        console.log('上传失败');
      }
    });

    xhr.addEventListener('error', () => {
      console.log('上传发生网络错误');
    });

    xhr.send(formData);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <input type="submit" value="click to submit" />
        {/* 展示上传进度 */}
        {uploadPercent > 0 && (
          <div>上传进度：{uploadPercent}%</div>
        )}
      </form>
    </div>
  );
}

注意：如果后端接口存在跨域限制，需要后端配置CORS规则允许你的前端域名访问，否则上传请求会被浏览器拦截。
如果偏好使用Fetch API实现，也可以通过监听响应体的可读流进度计算上传百分比，不过该方案兼容性稍弱，常规业务场景下优先使用XHR的实现即可。

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