上传完成后是否可以从Antd的上传动作中得到API响应？

Question

我正在使用 Antd 的上传组件来处理我上传到 Cloudinary 的图像。上传文件时，它 returns 有关文件的详细信息，其中包括服务器上的文件 URL。我需要在 Antd 的上传组件完成上传后从响应中获取该文件 URL，知道我该怎么做吗？

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

Answer 1

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

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

见下文 Ant Design documentation:

{
  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: { /* ... */ },
}

Upload Component documentation 上的第一个示例提供了如何实现 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>
)

上传完成后是否可以从Antd的上传动作中得到API响应？

Is it possible to get the API response from Antd's upload action after the upload is done?

upload

reactjs

next.js

antd