antd上传接口:如何返回promise
我正在使用antd框架，我必须使用upload API。签名如下：
文件操作:上传URL :string|() => Promise
我以这种方式调用API，试图返回一个Promise：
<Upload {...propsUpload}>
<Button> <Icon type="upload" />Upload</Button>
</Upload>使用引用函数uploadMedia的propsUpload
const propsUpload = {
action: this.uploadMedia,
listType: 'picture',
defaultFileList: [],
className: 'upload-list-inline',
}; 这是函数uploadMedia
uploadMedia = (file) => {
let formData = new FormData();
formData.append('file', file);
formData.append('uuid', this.generateuuid());
formData.append('domain', 'POST');
formData.append('filename', file.name );
return fetch(process.env.REACT_APP_API_URL +
'/v100/media/upload', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json'
},
body: formData
})
.then(response => response.json())
.then(data => data.data)
.catch(error => {
console.log('Error fetching profile ' + error)
})
}文件被正确上传到服务器。但是在调用API之后，antd尝试执行另一个失败的调用，可能是因为我没有从函数返回正确的值。
因此，缩略图显示为红色边框，并显示错误。在下图中，两者都有(失败的调用和带有红色边框的图像)
在函数uploadMedia中必须返回什么类型的对象才能正确使用api？
谢谢
回答 4
Stack Overflow用户
发布于 2019-03-27 07:41:08
我没有用过Uplaod组件，但是看了看它的文档，我觉得你用错了。查看示例并查看代码，action需要返回此URl的URL或Promise。在这种情况下，Upload会自己发出请求，所以你不需要做fetch。并且您的承诺返回data (对象)，因此上载将请求发送到[object Object] (这是.toString()应用于JS中的对象时返回的内容)
编辑
尝试检查文档中的所有示例，我可以看到当您想要手动上传文件时，有一个示例(如果您确实需要)
Stack Overflow用户
发布于 2020-10-10 20:28:02
对于任何希望在调用API后访问响应对象的用户。有两种方法可以访问响应。
- 实现一个自定义接口请求，如本问题的其他答案中所述。
- 使用AntD提供的onChange方法(这比使用自定义请求更容易)
下面我将使用代码块来解释第二种方法。
const fileUploadProps = {
name: "file",
action: config.remote + "api/file",
method: "POST",
showUploadList: false,
headers: {
authorization: "authorization-text",
contentType: "multipart/form-data"
},
onChange(info) {
if (info.file.status === "done") {
const { response } = info.file;
updateProfile(response.payload.file);
} else if (info.file.status === "error") {
message.error("Error uploading the file");
props.endLoad();
}
},
beforeUpload(file) {
const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error("You can only upload JPG/PNG file!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
const isGT20K = file.size / 1024 > 20;
if (!isLt2M) {
message.error("Image must smaller than 2MB!");
}
if (!isGT20K) {
message.error("Image must larger than 20KB!");
}
if (isJpgOrPng && isLt2M && isGT20K) {
props.startLoad();
return true;
} else {
return false;
}
}
};在Render函数中，我有AntD upload组件
<Upload {...fileUploadProps}>
<Button icon={<CameraFilled style={{ fontSize: "30px" }} />}></Button>
</Upload>您可以注意到我是如何访问onChange函数中的response对象的。上传完成后，它将调用onChange函数，使响应对象位于info对象中。
因此，您可以轻松地访问您的数据对象并调用下一个方法。
Stack Overflow用户
发布于 2019-03-27 07:58:32
我用customRequest接口解决的方法如下：
uploadMedia = (componentsData) => {
let formData = new FormData();
formData.append('file', componentsData.file);
formData.append('uuid', this.generateuuid());
formData.append('domain', 'POST');
formData.append('filename', componentsData.file.name );
fetch(process.env.REACT_APP_API_URL + '/v100/media/upload', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json'
},
body: formData
})
.then(response => response.json())
.then(data => data.data)
.then(data=> componentsData.onSuccess())
.catch(error => {
console.log('Error fetching profile ' + error)
componentsData.onError("Error uploading image")
})
}https://stackoverflow.com/questions/55367528
复制相似问题