React上传组件进度条卡在0%不动怎么办？

Top丶颖昕提问于 2026-02-02 10:01:34 阅读 33

交互

最近在做一个文件上传功能，想给用户实时显示上传进度。按照教程用了axios的上传进度事件，但进度条一直卡在0%不动，上传完成后也没显示100%。尝试过在useEffect里加依赖数组，也检查过文件对象没问题。

这是我的组件代码：


import axios from 'axios';

function UploadForm() {
  const [progress, setProgress] = useState(0);

  const handleUpload = async (file) => {
    try {
      const response = await axios.post('/api/upload', file, {
        onUploadProgress: (event) => {
          const percent = Math.round((event.loaded / event.total) * 100);
          setProgress(percent); // 这里可能有问题？
        }
      });
      console.log('上传成功', response);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <progress value={progress} max="100" />
      <button onClick={() => handleUpload(selectedFile)}>上传</button>
    </div>
  );
}

控制台没报错，但进度条就是不动。是不是useState更新不够快？或者需要手动刷新UI？之前用setTimeout模拟进度条还能动，真实上传时就不行了…

反馈机制进度反馈

我来解答赞 8 收藏

反馈

1 条解答

UI丽珍 Lv1

问题出在你传给axios的file不是正确的FormData格式。直接传文件对象，后端可能收不到正确数据，进度也拿不到。改成这样：

const handleUpload = async (file) => {

  const formData = new FormData();

  formData.append('file', file);

  

  try {

    await axios.post('/api/upload', formData, {

      onUploadProgress: (event) => {

        setProgress(Math.round((event.loaded / event.total) * 100));

      }

    });

  } catch (error) {

    console.error(error);

  }

};

差不多就行，记得后端也要对应处理FormData。

2026-02-02 10:02