react antd upload组件服务器上传图片报错Nginx 405

  1. 本地上传图片正常,可以看到上传图片时,调用了localhost接口:
    本地上传成功
    当前使用了upload组件的onChange事件。
  2. 服务器上传图片,报nginx 405。
  3. 搜索相关资料,告知方法都是将upload action删除即可,不要置空。但使用后无效。
  4. 查看react antd官方文档
    官方文档
    upload有默认的上传行为,从onChange中可获取相关信息。
    但使用customRequest,不用onChange,可覆盖默认的上传行为。
    看到这儿,解决问题的方法已经明确。
  5. 删除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
onChange打印
获取File文件,需要使用info.file.originFileObj
(2)customRequest控制台打印info
customRequest打印
获取File文件,需要使用info.file。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值