当前位置：首页 > React

react如何获取文件上传结束

2026-01-25 10:14:06React

获取文件上传结束的方法

在React中，可以通过监听文件上传组件的事件来获取上传结束的状态。以下是几种常见的方法：

使用input元素的onChange事件

通过监听<input type="file">的onChange事件，可以在用户选择文件后触发回调函数。上传结束通常需要结合异步操作（如API调用）的状态来判断。

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      console.log('文件上传结束', data);
    })
    .catch(error => {
      console.error('上传失败', error);
    });
  }
};

return (
  <input type="file" onChange={handleFileChange} />
);

使用第三方库（如axios）

如果使用axios等库上传文件，可以通过Promise的then和catch方法判断上传是否结束。

import axios from 'axios';

const handleUpload = (file) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
  })
  .then(response => {
    console.log('文件上传结束', response.data);
  })
  .catch(error => {
    console.error('上传失败', error);
  });
};

监听上传进度

如果需要在上传过程中显示进度，可以通过axios的onUploadProgress回调实现，上传结束时会在then中触发。

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percentCompleted}%`);
  },
})
.then(response => {
  console.log('文件上传结束', response.data);
});

使用React组件库

如果使用如react-dropzone或antd Upload等组件库，可以直接监听其提供的上传完成回调。

以antd Upload为例：

import { Upload } from 'antd';

const props = {
  action: '/upload',
  onChange(info) {
    if (info.file.status === 'done') {
      console.log('文件上传结束', info.file.response);
    }
  },
};

return (
  <Upload {...props}>
    <button>点击上传</button>
  </Upload>
);