antd upload上传图片在IE11中出现的问题 err_connection_reset

最新推荐文章于 2025-03-26 09:34:38 发布
最新推荐文章于 2025-03-26 09:34:38 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： react 前端 浏览器 文章标签： reactjs javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45190306/article/details/106711487
版权

问题：upload一开始使用在谷歌和IE都可以，但是最近出现了以下问题，在IE11和谷歌都偶尔会出现访问不到action的链接问题；
1、在IE中，直接用 https://www.mocky.io/v2/5cc8019d300000980a055e76这是组件里的action链接时，会访问不到该接口：
在这里插入图片描述
2、后端没有给保存图片的接口，所以考虑将该action去掉；但是去掉之后会报：
在这里插入图片描述
3、后面查了以下API，发现是beforeUpload方法中有返回promise对象导致的错误：
在这里插入图片描述
4、解决方案：考虑将beforeUpload方法返回return：false；在上传方法onChange中获取originFileObj值，该值需要进行base64编码（项目需要）。
注意：info.file中没有获取到对应的status和originFileObj值，可以从info.fileList中获取。

antd upload手动上传_前端AntD框架的upload组件上传图片时遇到的一些坑
weixin_39884323的博客
12-20 2014
前言本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。前端做文件上传这个功能，是很有技术难度的。既然框架给我们提供好了，那就直接用呗。结果用的时候，发现 upload 组件的很多bug。下面来列举几个。备注：本文写于2019-03-02，使用的 antd 版本是 3.13.6。使用 AntD 的 upload 组件做图片的上传因为需要上传多张图片...
Antd Upload上传图片nginx报错405
Y_G_G的博客
08-19 2870
antd Upload antd Upload listType 3个类型 一个项目把坑踩全了… 之前使用Upload 是用 action 属性，指定上传地址。现在是在form表单里面使用Upload，不配置action属性，直接formData提交。 问题： 本地调试没问题，打包测试，nginx转发报错405 not allowed 查到原因是 nginx禁止用post访问静态资源 解决： 问：哎 上传图片怎么会访问静态资源呢？？？ 答：默认的上传行为… Upload提供 【 customRe
Srpingboot上传文件的时候显示netERR_CONNECTION_RESET
jsjqjava的博客
08-19 1418
Srpingboot上传文件的时候显示netERR_CONNECTION_RESET 1.可能的原因上传文件过大 2.这是后台显示的错事 3.修改上传文件最大值就行(这里就不详细说明，不同的srping的版本，不同封装方法，修改位置都不同，上百度搜索” 修改上传文件最大值”就行) ...
文件上传时提示NET:ERR_CONNECTION_RESET
热门推荐
以择人之心择己，以恕己之心恕人。
06-20 4万+
背景： 最近闲暇之余写了一个半自动化的项目部署的项目，因为发现之前使用的jenkins太消耗服务器资源了，由于现在又不想升级服务器，就自己写一个半自动化的。其实就是一些java执行我在服务器上面写好的.sh的脚本即可，或者执行一些linux命令 案发现场 *NET:ERR_CONNECTION_RESET** 从单词的字面意思是，错误连接重置，百度了下，说什么文件上传大小控制的文件。 解决思路 ...
自定义antd-Upload上传显示进度条思路
最新发布
gqz_的博客
03-26 336
首先组件里自带的有上传进度展示，我不知道为啥不展示。然后项目里用的又是onChange时调用接口来上传的，因此我接到需求后查完资料可以用。Progress组件自定义展示上传进度的示例代码，请参考！以下是通过ajax获取文件上传进度结合。使用Progress组件展示进度。
.net core webapi 文件上传 net::ERR_CONNECTION_RESET
木槿昔年
03-28 3334
最近项目中使用layui的upload插件做文件上传（后台为.netCore webapi）时，出现了一下的问题： 对于小文件来说上传毫无压力，但是对于大文件而言（我的上限为40来兆），服务器不会有反应，调试连后台的方法都不会进去，连接半天后出现这样的错误：net::ERR_CONNECTION_RESET。 试着在文件上传的这个方法上面添加RequestSizeLimitAtt...
上传文件时，报错net::ERR_CONNECTION_RESET
Mrs_Yu的博客
04-16 7508
原因很简单就是上传的文件太大。解决办法如下： 本人项目是Springboot项目，内置Tomcat，可以直接添加配置文件即可： 1.添加依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</arti...
react 使用antd后ie11不能正常访问的解决办法
qing_小诺的博客
04-30 1550
step1：安装 react-app-polyfill 【npm i --save react-app-polyfill】 step2：修改 package.json 文件，在指定位置添加 "ie 11"，如下图： step3：在入口文件index.js文件的头部添加两行代码（貌似不加也行）： import 'react-app-polyfill/ie11' import 'react-app-polyfill/stable' 然后重启项目，在ie中访问即可看到页面。 ...
antd Upload 文件上传的示例代码
10-17
Ant Design（antd）是一个基于React的UI框架，它为开发者提供了许多高质量的组件，其中Upload组件...同时，开发者在实际应用中应该注意文件上传的安全性问题，如验证上传文件的类型和大小，以及后端的文件验证处理等。
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
antd上传文件到服务器,Antd 4 Upload 图片上传（前端篇）
weixin_36074800的博客
07-30 5116
Antd 4 Upload 图片上传(前端篇)简介记录一下第一次使用 Ant Design 的 Upload 组件上传图片到后端服务器的基本流程和思路。前端使用了 React + Antd ，后端使用 Nodejs 的Express 。主要介绍 Antd 中 Upload 组件的照片墙，也就是上传多张图片。Ant Design 官方 Upload 教程地址：Antd Upload 组件实现1. 简...
vue-antd-upliad文件上传打开选择文件弹框出现前进行的事件
zwszh的博客
12-21 2713
关于vue antd upload的问题 今天遇到这个一个问题，是antd的上传，上传之前要进行判断，如果之前上传过一次，那就会有一个提示弹出，然后判断他是继续操作还是取消操作，点击确定按钮后呢，我的提示框消失，上传的弹框弹出，但是要再次点击一次才会触发事件。 代码如下： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 然后这个是在网上找.
如何简单访问HTTP的GET、POST、PUT、DELETE，MOCK数据
AI架构师易筋
11-27 2166
目录简单的访问http的get, post方法, mock数据如何Mock数据PostManSoapUI命令行curl温馨提示 简单的访问http的get, post方法, mock数据 内容分为以下几个部分，巧妇需要有米之炊，先看看如何Mock数据，后面是http访问三个常用工具。 如何Mock数据 PostMan SoapUI 命令行curl 如何Mock数据 https://www.mo...
React工作30:ant design上传组件
qq_41632427的博客
07-16 437
react
antd 解决Upload组件before-upload无效的问题
B★R★S的博客
07-09 6551
使用antd+Vue的时候，有个上传视频的操作，当使用upload组件上传时，参考官网简单的实例，并不能手动上传。研究一番后发现使用before-upload属性可行，但是碰到了点问题： 我的需求是在上传到服务器之前，判断是否存在同名文件，存在则直接将同名文件地址写入表单，免去上传。初步编码如下： beforeUpload (file, fileList) { return this.$http.get('/cms/charge/material/isCopy?name=' + file...
前端关于自己模拟接口做测试
冯开心吖的博客
06-17 6293
在开发中，对于刚入行的小白来说，调接口似乎成了一件很头疼的事，因为在学习中绑定的数据都是自己写死的模拟数据，想要练习通过接口拿数据又不会写，那可以模拟一个接口来做请求数据这个操作 https://www.mocky.io/ 这是接口模拟工具 步骤如下： 接下来就可以访问了，在访问前先用接口测试工具跑一下，看看通不通 ...
antd vue form upload 上传
nongmai6494的博客
04-01 635
<template> <div> <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }"> <a-form-item label="图片" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }"> <a-upload name="file".
文件过大上传阿里云OSS，浏览器中报错：Failed to load resource: net::ERR_CONNECTION_RESET解决方法
weixin_43959459的博客
02-13 6164
近期做文件上传到阿里云的OSS时，开始上传小文件没有任何问题，后来无意间上传了一些大于50M的文件， 浏览器中会出现如下错误提示：Failed to load resource: net::ERR_CONNECTION_RESET 在查看了阿里的文档后做了如下集成，改为阿里云的分片上传方式解决问题：贴上代码，仅供参考！！！ 参考阿里文档：https://help.aliyun.com/document_detail/84786.htm?spm=a2c4g.11186623.0.0.738478e8y9l2h
antd upload上传图片
05-30
好的，您可以按照以下步骤来实现antd upload上传图片： 1. 首先安装antd和axios。 ```bash npm install antd axios --save ``` 2. 在您的组件中引入antd upload组件。 ```javascript import { Upload, message } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; class UploadImage extends React.Component { state = { loading: false, imageUrl: '', }; handleChange = info => { if (info.file.status === 'uploading') { this.setState({ loading: true }); return; } if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl, loading: false, }), ); } }; render() { const { loading, imageUrl } = this.state; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload={beforeUpload} onChange={this.handleChange} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> ); } } ``` 3. 在handleChange方法中，您需要将上传的图片转换为base64格式，以便于后续的保存和显示。 ```javascript import { Upload, message } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } class UploadImage extends React.Component { state = { loading: false, imageUrl: '', }; handleChange = info => { if (info.file.status === 'uploading') { this.setState({ loading: true }); return; } if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl, loading: false, }), ); } }; render() { const { loading, imageUrl } = this.state; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload={beforeUpload} onChange={this.handleChange} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> ); } } ``` 4. 最后，在handleSubmit方法中，您可以将base64格式的图片传给后端进行保存。 ```javascript import { Upload, message } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import axios from 'axios'; function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } class UploadImage extends React.Component { state = { loading: false, imageUrl: '', }; handleChange = info => { if (info.file.status === 'uploading') { this.setState({ loading: true }); return; } if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl, loading: false, }), ); } }; handleSubmit = () => { axios.post('/api/upload', { image: this.state.imageUrl, }).then(response => { message.success('Image uploaded successfully!'); }).catch(error => { message.error('Failed to upload image!'); }); }; render() { const { loading, imageUrl } = this.state; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <div> <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" beforeUpload={beforeUpload} onChange={this.handleChange} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> <Button type="primary" onClick={this.handleSubmit}>Submit</Button> </div> ); } } ``` 以上就是antd upload上传图片的实现步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值