ProFormUploadButton触发请求路由时如何自定义上传接口和参数？

Question

在使用ProFormUploadButton时，如何自定义上传接口和参数是一个常见的技术问题。默认情况下，ProFormUploadButton会使用标准的文件上传逻辑，但实际项目中往往需要对接特定的后端接口，并传递额外的参数。例如，当用户选择文件后，如何将文件发送到自定义的API地址（如`/api/custom-upload`），同时附带认证令牌、文件分类标签等附加信息？此外，如何处理上传过程中的错误反馈和进度展示也是关键点。解决此问题需要明确配置`action`属性为自定义接口地址，利用`data`属性动态添加参数，并通过`onChange`或`beforeUpload`钩子实现更复杂的业务逻辑。这不仅提升了组件的灵活性，还确保了前后端交互的兼容性与安全性。

Answer 1

1. 初识ProFormUploadButton的上传逻辑

在Ant Design Pro中，ProFormUploadButton是一个用于文件上传的高级组件。默认情况下，它会基于标准的HTTP请求将文件发送到指定的服务器地址。然而，在实际项目中，往往需要对接特定的后端接口，并传递额外参数。

例如，当用户选择一个文件时，如何将文件发送到自定义API地址（如/api/custom-upload），同时附带认证令牌、文件分类标签等附加信息？这需要我们对ProFormUploadButton的配置进行深入理解。

• action：指定上传接口地址。
• data：动态添加上传所需的额外参数。
• onChange/beforeUpload：实现更复杂的业务逻辑。

2. 配置自定义上传接口

为了实现自定义接口上传，首先需要明确配置action属性为后端提供的API地址。以下是一个简单的代码示例：

<ProFormUploadButton
    action="/api/custom-upload"
    data={{ token: "your-auth-token", category: "image" }}
/>
    

上述代码中，action指定了上传接口地址/api/custom-upload，而data则传递了认证令牌和文件分类标签。

此外，如果需要动态生成参数，可以使用函数形式：

data={(file) => ({
    token: "your-auth-token",
    category: file.name.endsWith(".jpg") ? "image" : "document"
})}
    

3. 处理复杂业务逻辑

除了基本的参数配置外，ProFormUploadButton还提供了beforeUpload和onChange两个钩子，可用于处理更复杂的场景。例如：

1. beforeUpload：在文件上传前执行验证或预处理操作。
2. onChange：监控上传状态并处理进度、错误反馈等。

以下是一个结合两者使用的示例：

const beforeUpload = (file) => {
    if (file.size > 1024 * 1024 * 5) {
        message.error("文件大小不能超过5MB！");
        return false;
    }
    return true;
};

const onChange = (info) => {
    const { status } = info.file;
    if (status === "uploading") {
        console.log("文件正在上传...");
    } else if (status === "done") {
        message.success("文件上传成功！");
    } else if (status === "error") {
        message.error("文件上传失败！");
    }
};
    

4. 错误反馈与进度展示

在实际开发中，错误处理和进度展示是提升用户体验的重要部分。通过onChange方法，我们可以实时捕获上传状态，并根据状态显示不同的提示信息。

状态	描述	处理方式
uploading	文件正在上传中	显示进度条或加载动画
done	文件上传完成	显示成功提示或更新UI
error	文件上传失败	显示错误信息并提供重试选项

以下是进度展示的简单实现：

5. 流程图：文件上传过程

为了更直观地理解整个文件上传流程，以下是一张流程图：

graph TD;
    A[用户选择文件] --> B[触发beforeUpload];
    B -->|验证通过| C[发起上传请求];
    C --> D[监听onChange状态];
    D -->|uploading| E[显示进度条];
    D -->|done| F[显示成功提示];
    D -->|error| G[显示错误信息];