如何在Ant Design中自定义Dragger组件调用上传函数？

问题分析 #

你当前的核心问题是：

• 无法正确触发自定义的handleImageUpload上传函数
• 受保护路由下，默认的action属性无法处理权限验证，且自定义上传逻辑不需要依赖action

解决方案 #

Ant Design Upload组件支持通过customRequest完全接管上传逻辑，这是适配自定义上传函数的正确方式，同时能解决受保护路由的权限问题。

1. 修改Upload配置Props #

移除action属性，添加customRequest来接管上传流程，调整后的完整配置如下：

const props: UploadProps = {
  name: 'file',
  multiple: true,
  // 自定义上传逻辑，完全替代默认action请求
  customRequest: async ({ file, onSuccess, onError }) => {
    try {
      // 将单个文件包装成数组，适配handleImageUpload的参数格式
      await handleImageUpload([file]);
      // 通知Upload组件上传成功，更新文件状态
      onSuccess(null, file);
      message.success(`${file.name} 文件上传成功`);
    } catch (err) {
      // 通知上传失败
      onError(err);
      message.error(`${file.name} 文件上传失败`);
    }
  },
  onChange(info) {
    const { file } = info;
    if (file.status === 'uploading') {
      console.log(`${file.name} 正在上传`);
    }
  },
  onDrop(e) {
    console.log('拖入的文件:', e.dataTransfer.files);
  },
};

2. 处理受保护路由权限 #

在你的handleImageUpload函数中，添加认证请求头（比如JWT Token），确保接口能通过权限验证：

const handleImageUpload = async (files: any) => {
  try {
    const data = new FormData();
    for(let i = 0; i < files.length; i++){
      data.append('images', files[i]);
    }
    // 添加认证头，示例从localStorage获取token
    const token = localStorage.getItem('authToken');
    const { data: images } = await axios.post('/products/upload', data, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': token ? `Bearer ${token}` : ''
      }
    });
    setAddedPhotos(prevState => [...prevState, ...images]);
  } catch (error) {
    console.error(error);
  }
};

3. 关键说明 #

• 为什么移除action？：当设置customRequest后，Ant Design会跳过默认的action请求，完全使用你自定义的上传逻辑，所以action属性不再需要。
• 正确触发handleImageUpload：customRequest会传递当前上传的文件对象，将其包装成数组后传入你的handleImageUpload，匹配函数的参数格式。如果需要批量上传多个文件，可以在组件中添加状态收集所有选中文件，再手动触发批量上传（比如加一个"确认上传"按钮）。
• 文件状态管理：通过onSuccess和onError回调通知Upload组件更新文件状态，确保界面能正确显示上传成功/失败的反馈。

最终TSX代码 #

你的Dragger组件代码无需修改，直接使用更新后的props即可：

<Dragger {...props}>
  <p className="ant-upload-drag-icon">
    <InboxOutlined />
  </p>
  <p className="ant-upload-text">Click or drag file to this area to upload</p>
  <p className="ant-upload-hint">
    Support for a single or bulk upload. Strictly prohibited from uploading company data or other
    banned files.
  </p>
</Dragger>

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