antd5上传图片显示405解决

于 2023-11-01 21:09:04 发布
阅读量694 收藏
点赞数
分类专栏： ui组件库 文章标签： react umi antd5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40119412/article/details/134170106
版权
文章介绍了如何在使用AntDesign的上传组件时，避免因默认方法引发的405错误，并指导如何自定义上传逻辑，包括使用`beforeUpload`钩子和直接使用`customRequest`功能。作者还提供了相关文档链接以供参考。
摘要由CSDN通过智能技术生成

antd5上传图片，默认使用上传方式会调用本地的接口。

405 Method Not Allowed
状态码 405 Method Not Allowed 表明服务器禁止了使用当前 HTTP 方法的请求。
在这里插入图片描述

在这里插入图片描述

Upload 
{...props}
  beforeUpload={(file) => {
	//自定义上传图片的逻辑
	
	//最后返回false
	return false
}}
>
    <Button icon={<UploadOutlined />}>Upload</Button>
  </Upload>

最后，上传图片时，不会再调用localhost的接口，没有任务接口变化。

另一个，可以直接使用customRequest。
https://github.com/react-component/upload#customrequest
在这里插入图片描述
在这里插入图片描述

查看官方文档：https://ant-design.antgroup.com/components/upload-cn#uploadfile

HaanLen
关注
专栏目录
Antd Upload上传图片nginx报错405
Y_G_G的博客
08-19 2666
antd Upload antd Upload listType 3个类型 一个项目把坑踩全了… 之前使用Upload 是用 action 属性，指定上传地址。现在是在form表单里面使用Upload，不配置action属性，直接formData提交。 问题： 本地调试没问题，打包测试，nginx转发报错405 not allowed 查到原因是 nginx禁止用post访问静态资源 解决： 问：哎 上传图片怎么会访问静态资源呢？？？ 答：默认的上传行为… Upload提供 【 customRe
jeecg-boot + antd design vue 图片压缩上传
weixin_40645949的博客
07-17 827
用到的函数 beforeUpload: 上传文件之前的钩子函数，支持返回一个Promise对象。 解决思路: 一：在上传图片前获取该图片的文件流（beforeUpload中获取）。 二：对这个文件流进行压缩操作 三：再将压缩后的文件流传过去（resolve(newFile) 遇到的问题 1：Invalid prop: custom validator check failed for prop "fileList". 2：Invalid prop: custom validator chec
react antd upload组件服务器上传图片报错Nginx 405
weixin_43172311的博客
08-17 539
react antd upload组件服务器上传图片报错nginx 405
el-upload图片上传,本地测试可以,服务器部署报错405
最新发布
m0_61601708的博客
10-19 707
用域名请求图片上传接口的时候,报错405 Not Allowed错误。本地测试都没问题，部署到服务器上面报错405。
[ant-design-vue]-upload组件上传405问题
前端
03-04 1534
[ant-design-vue]-vue2.x upload组件上传405问题环境问题描述问题解析http-405问题分析 环境 使用的是包的版本是： "vue": "^2.6.11" "ant-design-vue": "^1.6.5" 问题描述 在使用ant-design-vue的组件upload的时候，出现了405的报错 问题解析 在该组件中使用了post方式上传文件，使用了upload组件 注意，文件上传不可以使用其它方式，只能使用POST //UI： <a-upload accept=
关于本地使用antd的upload组件上传文件,ngnix报错405的问题
09-24 1922
使用阿里的ui框架antd的upload,会自动请求ngnix上面的一个路径,也就是action所在的位置,一直报错405 not allowed,后来经讨论,统一将action写成一个路径,后端对这个路径返回200,一个空的json对象,为ok即可 转载于:https://www.cnblogs.com/jiuxu/p/11576486.html...
antdesign 文件上传组件手动上传文件；本地上传正常，测试端405解决方法
qq_52685664的博客
10-21 952
【代码】antdesign 文件上传组件手动上传文件。
【antd 3.x】upload上传组件预览pdf格式文件和下载ofd格式文件
qq_39691383的博客
12-17 5663
之前写过upload组件关于图片的上传和预览，本篇不再讲解，可见文章【antd 3.x】在表单中使用上传组件上传图片（文件）和预览功能 本篇文章主要内容： 是关于pdf和ofd格式的文件的预览和下载，浏览器不支持预览ofd格式文件，只能下载。 1、首先声明，upload组件是不支持显示pdf和ofd文件格式的缩略图的【这里使用业务解决，让设计给一个pdf和ofd的模板图片，当上传的文件为pdf或ofd格式时，显示该模板图片】 2、pdf预览用到了iframe标签，也可以使用embed标签 3、ofd文件下载
上传视频并预览
08-26
在IT行业中，视频上传和预览是Web应用中常见的功能，尤其在社交媒体、教育平台以及视频分享网站等。本文将详细解析如何使用PHP实现视频上传并进行预览的流程。 首先，我们需要理解视频上传的基本原理。在Web环境中...
android h5选择图片上传,js-微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）...
weixin_35710158的博客
05-27 1297
值得注意的是：1.在微信H5中选择图片运用：wx.chooseImage，上传图片：wx.uploadImage。2.上传图片的时候务必是一张一张的上传的(建议采用递归)3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传。案例：深圳艺星“#美力女生#星粉颜值夏令营，2019Yestar艺星整形”Html同时选择上传1-9张照片，第一张为封面图选择图片js:var imgA=new Ar...
爬2.12.6的Antd上传图片坑
weixin_42357617的博客
10-08 1211
因为这个上传插件只能默认上传，而如果使用beforeUpload会导致图片一直上传加载而卡住的bug 所以必须使用默认上传，在提交表单之前，本地选取图片之后，能够默认上传到阿里云服务器（如果上传到后端，其实不如直接上传到阿里云服务器来的直接） 所以这里的爬坑对象就是Antd的2.12.8版本（3.x版本没有这个问题）和阿里云oss的 存储对象服务 安装环境 请参考Dva项目作为Antd的Demo 安装阿里云oss服务 官网链接 1、使用npm安装SDK开发包，安装命令为npm install ali-o
SpringMVC跨域上传图片出现的405错误及409错误解决方式
taibaishenlong的专栏
10-27 1424
第一步，创建两个web项目，创建项目如下所示： 其中fileupload_server用作图片服务器使用，day1021_springmvc用作上传图片的web项目使用。 第二步，分别将两个项目发布两个tomcat服务器上，注意，此刻我们所模拟的是在一台电脑上进行跨服务器上传图片操作的。 将fileupload_server部署到tomcat-9.0.36服务器上，注意修改端口。然后将day1021_springmvc部署到tomcat-8.5.43服务器上。 然后点击Apply–>OK，这样就部
erupt框架Ueditor富文本编辑器图片上传出现405异常
xp_xpxp的博客
02-17 808
erupt框架富文本编辑器图片上传405异常
文件上传服务器405错误,使用webclient上传文件405错误问题
weixin_29611239的博客
08-13 527
VS C# 2005我使用下面的代码将文件上传到运行Windows IIS 5.1的服务器。使用webclient上传文件405错误问题我只是在运行Windows XP的本地服务器上进行测试。但是，我不断收到以下错误消息：The remote server returned an error (405) Method Not Allowed我确定这是一个IIS问题，也许是有权限的东西。但是，我配置...
使用jersey组件向图片资源服务器上传图片报405 Method Not Allowed错误
chenmual的博客
05-22 2825
报错信息大致如下: 按照B站教程学习springmvc框架 B站springmvc教程 照着老师思路配置和部署的. 环境:WIN7 IDEA tomcat9.0.6 jdk1.8 1.除了spring全家桶之外相关包引入: <!--文件上传组件--> <dependency> <groupId>commons-fileupload&...
使用Jersey跨服务器上传图片 报405 Method Not Allowed错误
Buns.的博客
10-31 624
在学习Jersey跨服务器上传图片时遇到如下报错 相关包引入： <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <...
antd手动上传文件进度条不显示
09-06
如果antd手动上传文件时进度条不显示，可能是因为以下原因： 1. 检查是否正确设置了上传组件的`onChange`事件，并在事件处理函数中更新上传进度。 ```jsx <Upload // 其他属性 onChange={handleUploadChange} > <Button>上传文件</Button> </Upload> ``` 2. 确保在事件处理函数`handleUploadChange`中正确更新上传进度的状态。你可能需要使用`setState`或者使用`useState`来更新状态。 ```jsx const [uploadProgress, setUploadProgress] = useState(0); const handleUploadChange = (info) => { if (info.event) { const percent = Math.floor((info.event.loaded / info.event.total) * 100); setUploadProgress(percent); } // 其他逻辑 }; // 进度条组件使用上传进度 <Progress percent={uploadProgress} /> ``` 3. 检查网络请求是否成功返回上传进度信息。可能是因为服务端没有正确返回上传进度信息，导致进度条无法显示。 4. 如果以上解决方法都没有生效，可能是由于antd版本不兼容或其它未知的bug。可以尝试更新antd的版本，或者查看antd的官方文档、GitHub仓库等，寻找相关的问题讨论和解决方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值