我正在使用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?
谢谢
发布于 2019-03-27 07:41:08
我没有用过Uplaod
组件,但是看了看它的文档,我觉得你用错了。查看示例并查看代码,action
需要返回此URl的URL或Promise。在这种情况下,Upload
会自己发出请求,所以你不需要做fetch
。并且您的承诺返回data
(对象),因此上载将请求发送到[object Object]
(这是.toString()
应用于JS中的对象时返回的内容)
编辑
尝试检查文档中的所有示例,我可以看到当您想要手动上传文件时,有一个示例(如果您确实需要)
发布于 2020-10-10 20:28:02
对于任何希望在调用API后访问响应对象的用户。有两种方法可以访问响应。
下面我将使用代码块来解释第二种方法。
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对象中。
因此,您可以轻松地访问您的数据对象并调用下一个方法。
发布于 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
复制相似问题