- 本地上传图片正常,可以看到上传图片时,调用了localhost接口:
当前使用了upload组件的onChange事件。 - 服务器上传图片,报nginx 405。
- 搜索相关资料,告知方法都是将upload action删除即可,不要置空。但使用后无效。
- 查看react antd官方文档
upload有默认的上传行为,从onChange中可获取相关信息。
但使用customRequest,不用onChange,可覆盖默认的上传行为。
看到这儿,解决问题的方法已经明确。 - 删除onChange相关代码,采用customRequest
说明:也可不删除onChange,根据自己需要决定,customRequest已覆盖onChange默认行为。
const getBase64 = (img:any, callback:any) => {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
};
const props = {
name: 'file',
accept: ".jpg,.jpeg,.png",
showUploadList: false,
maxCount: 1,
headers: {
authorization: 'authorization-text',
"X-CSRFTOKEN": threeStep || "",
},
beforeUpload(info:any) {
if(info && !(info.name.endsWith(".jpg") || info.name.endsWith(".jpeg") || info.name.endsWith(".png"))) {
errorReport("仅支持PNG/JGP/JPEG格式图片");
}
if(info && (info.size / 1024 / 1024) > 5) {
errorReport("文件大小不超过5M");
return false;
}
},
customRequest: (info:any) => {
commonUpdate({ logoContent: info.file });
getBase64(info.file, (base64:any) => {
commonUpdate({ imageUrl: base64 });
})
},
};
// html
<Upload
{...props}
className="report-upload"
listType="picture-card"
action={undefined}
>
{
imageUrl ?
<img src={imageUrl} alt="logo" style={{width:'100%'}} />
:
<div>
<PlusOutlined />
<div style={{marginTop:8,color:'#666'}}>上传图片</div>
</div>
}
</Upload>
上传图片时,不会再调用localhost的接口,没有任务接口变化。
到此问题已解决。
9. 说明使用onChange与customRequest的区别:
(1)onChange控制台打印info
获取File文件,需要使用info.file.originFileObj
(2)customRequest控制台打印info
获取File文件,需要使用info.file。