antd react 上传组件 customRequest 讲解

antd（Ant Design）是一个流行的 React UI 库，提供了丰富的组件以帮助开发者快速构建美观且功能强大的用户界面。在 antd 的上传组件（Upload）中，customRequest 是一个非常重要的属性，它允许开发者自定义上传文件的请求逻辑。

默认情况下，antd 的上传组件会使用内部的请求逻辑来处理文件上传。但是，很多时候，我们需要根据自己的业务需求来定制上传逻辑，比如添加认证信息、使用特定的 HTTP 请求库、处理复杂的上传流程等。这时，我们就可以使用 customRequest 属性来实现。

customRequest 是一个函数，它会在用户选择文件并触发上传时被调用。这个函数接受两个参数：一个是包含文件信息的对象（options），另一个是一个用于中断上传的函数（onAbort）。

下面是一个简单的示例，展示了如何使用 customRequest 自定义上传逻辑：

import { Upload, Button } from 'antd';  
import { UploadOutlined } from '@ant-design/icons';  
import axios from 'axios';  
  
const CustomUpload = () => {  
  const customRequest = async (options) => {  
    const { onSuccess, onError, file, onProgress } = options;  
    const formData = new FormData();  
    formData.append('file', file);  
  
    try {  
      const response = await axios.post('/your-upload-endpoint', formData, {  
        headers: {  
          'Authorization': 'Bearer your-token', // 添加认证信息或其他自定义头部  
          // 其他必要的请求头部  
        },  
        onUploadProgress: (progressEvent) => {  
          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);  
          onProgress(percentCompleted);  
        },  
      });  
  
      if (response.data.success) {  
        onSuccess(response.data);  
      } else {  
        onError(response.data.error);  
      }  
    } catch (error) {  
      onError(error);  
    }  
  };  
  
  return (  
    <Upload  
      customRequest={customRequest}  
      showUploadList={false}  
    >  
      <Button icon={<UploadOutlined />}>点击上传</Button>  
    </Upload>  
  );  
};  
  
export default CustomUpload;