上传完成后，是否可以从 Ant 的上传操作中获得 API 响应？

Question

我正在使用Antd的Upload组件来处理我的图像上传到cloudary。上传文件时，它返回有关文件的详细信息，其中包括服务器上的文件URL。我需要从响应中获得该文件URL后，andd的上传组件完成上传，知道我怎么能做到这一点吗?

还是我需要通过编写自己的自定义请求来自己处理?

Answer 1

Ant Design的上传组件公开的onChange函数在它的prop中包含了一些关于上传的数据。

您可以使用file.response属性来检索从上传服务返回的响应。

参见Ant Design文档:

{
file: {
uid: 'uid',      // unique identifier, negative is recommend, to prevent interference with internal generated id
name: 'xx.png',   // file name
status: 'done', // options：uploading, done, error, removed. Intercepted file by beforeUpload don't have status field.
response: '{"status": "success"}', // response from server
linkProps: '{"download": "image"}', // additional html props of file link
xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
},
fileList: [ /* ... */ ],
event: { /* ... */ },
}

一个如何实现onChange函数的例子可以在上传组件文档中的第一个例子中找到。

const props = {
name: 'file',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status === 'done') {
// Handle response from API
console.log(info.file.response);
}
},
};
return (
<Upload {...props}>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
)