axios传输图片报错

最新推荐文章于 2024-04-16 14:48:10 发布
最新推荐文章于 2024-04-16 14:48:10 发布
阅读量392 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/singlever/article/details/103998650
版权

如果你遇到的情况满足以下条件
1.使用axios传输
2.使用的formdata对象
3.传输的是图片
4.头部设置的是multipart/form-data或者是application/x-www-form-urlencoded结果在控制台看到header里面是application/json
5.设置了axios拦截器

ok，问题就在于formdata这个对象，是个特殊的对象，理解为json相对于object，然而在axios拦截器中会将data数据拦截下来，转换成普通的object对象再return出去，服务器收到object对象而不是formdata对象自然会对你报错。

解决办法，
1.拦截器中再设置一个通道，将数据重新转化为formdata对象再传输出去

2.或者重新用axios.create一个新的实例，这个实例不会被之前的拦截器影响，再重新配置配置文件，详情请查看axios官方文档

singlever
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios使用form-data传参方式解决参数格式不正确问题
qq_35946021的博客
04-27 5064
vue 中axios使用form-data传参方式，解决参数格式不正确问题
axios里设置了withCredentials跨域报错
黄哈哈的博客
09-06 1190
报错： Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode .
Axios上传文件、图片
qq_40571755的博客
04-17 604
Axios上传图片 upIdCardIndexMan(e){ let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('file',file);//通过append向form对象添加数据 console.log(param.get('file')); //FormData私有...
ios 文件上传失败，安卓可以上传，ios手机 无法上传文件,在使用axios进行上传文件的坑
Start的小笔记
07-18 2289
el-upload ios上传文件错误，安卓上传正常
ios html5 head,axios post怎么使用？传大量数据时，出现413 FULL head
weixin_39673471的博客
06-24 626
使用axios发布文章，代码如下：this.$axios({method: 'post',url: '/post',data: {description: opt.editorContent,time: time,...}，}).then(res => {...}发送的请求是json格式的，后台常规方式无法获取，而且当description数据过大会报413 FULL head错误手动改Co...
axios上传formdata失败以及nodejs接受formdata失败
程序员秋风的博客
06-13 9087
axios上传formdata失败以及nodejs接受formdata失败今天用nodejs写一个上传图片的功能，因为这个功能是用在vue中的。我首先在nodejs服务器上用jquery的ajax写好了这个功能，可是移植到vue中却出现了问题。 下面来说下，关于formdata一些坑。客户端用jquey 的ajax上传时， 需要加上这句，防止formdata被序列化 用axios上传时。需要加
axios接口报错-参数类型错误解决
Zaqenenen的博客
12-25 1926
1.post方法问号跟参在url后发送请求 通过qs方法 …运算符 2.content-type未符合 首先了解post请求常见的数据格式（参考文章） Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端 Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端 Content-Type: multipart/form-data：它会将请求体的
vue+axios跨域报错
weixin_42947848的博客
07-18 992
flask+axios $http.post()表单数据传不到后端-跨域、数据传输 浏览器f12console报错 报错内容： Access to XMLHttpRequest at 后台接口 from origin 前端地址 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 进一步查看错误，刷新页面重新发送请求，network-x
springboot+axios传参问题
最新发布
weixin_41670405的博客
04-16 795
res.data：获取后台响应的数据。前端传过去的参数名称一定要与后台接收的参数名称一致。后台代码跟第一种方式传参代码一致。在使用axios之前需要引入axios.js文件。访问之后你会发现报错400。value：参数名称要跟前端的传来参数名称一致。第一种方式：就是将后台接收参数方式使用。params：固定写死的否则参数无效。RequestParam注解接收参数。@RequestBody接收实体类。第二种方式：改变前端传参写法。
vue axios post发送复杂对象问题
12-10
虽然axios可配置发送方式（post/get等），但如果不做其他配置，post的数据其实也是拼在请求地址后面，而这种传输方式会有很多问题：一是可能数据丢失，二是get传送的数据长度有limit，如果需要保存大段的中文，会...
前端发送axios请求报错Request failed with status code 500解决方案
热门推荐
前端与计算机相关知识的分享，博主的qq523235674
08-02 4万+
发现自己的请求头参数格式没有错误，jwt的身份验证也通过了，然后使用post测试接口，发现没啥毛病，搞了半天（疯狂百度搜索引擎）在终端再次打开自己的请求参数（playLoad），仔细一看，好像发送的参数并不是参数拼接的。application/x-www-form-urlencoded格式。终于，原来是我发送的请求参数格式不对，传送参数的形式不是我们熟悉的。qs.parse()是将URL解析成对象的形式。qs 是一个增加了一些安全性的查询。成URL的形式，以&进行拼接。解决我遇到的问题我使用了。......
axios 上传文件_前端图片上传方案详解
weixin_39743423的博客
11-27 3295
以往用到图片上传功能都是直接使用现成的插件，今天把其中用到的知识点整理一下。知识点字典input 标签之 file 类型FileReader 对象：读取文件FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串FormData 对象使用 axios 上传input 标签之 file 类型当设置 input 标签 type 为 file 时，input ...
axios 传递图片以及后台接收图片
qq_40820382的博客
02-01 5822
首先在main.js里面导入 axios，然后进行全局挂载，Vue.prototype.$axios = axios 这样，在项目中的任何一个位置都能通过 this.$axios({}) 去调用了。 如:调用登录接口 this.$axios({ method: "post", url: "/shiro/sys/login", data: { username: this.username, password: this.
axios请求的使用---上传图片
jp2221982388的博客
03-12 1351
Ajax请求，axios请求，图片请求，图片上传，前端基础，学习框架前提基础
vue项目 axios上传图片到 阿里云 oss， 跨域，405， 400问题处理
业余前端的职业经历
12-22 3492
跨域问题 服务器端处理。添加请求允许的 请求报错。405 使用 formData格式请求数据 let params = new FormData() 注意 content-type 类型必须是 Content-Type: multipart/form-data 如果有全局设置的axios 的请求拦截的话，注意 防止被更改哦 请求报错 400 先检查下参数有没有写错 大小写什么的。 注意 请求的文件流 须放到最后一个位置上 let params = new FormData() params.ap
在使用axios进行上传文件的坑
shsongtao的博客
06-15 2万+
在进行文件上传后台报错 在使用axios进行文件上传时,后台的grails程序经常或出现不能获取file的情况 No signature of method No signature of method: org.springframework.security.web.servletapi.HttpServlet3RequestFactory$Servlet3SecurityContextH...
vue使用axios上传图片
从入门到放弃的博客
06-13 1万+
参考：https://www.cnblogs.com/rachelch/p/8462877.html html部分，可以把input file的opacity设置为0，点击其父容器，即触发file <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="up...
vue的axios使用时，Content-Type 引发的参数接收不到的问题回顾
weixin_40402192的博客
10-19 1万+
问题来源： 在使用axios时，和java小哥联调，发现调接口服务器始终拿不到参数data，但是检查network也的确传了data，好奇之下，拿了以前的项目翻了下，才有了该文章。   基于 vue-axios 和 $.ajax 两种请求方式中数据传输的思考 以java为例，数据传输的起源： 一开始，Java为了实现前后端通信，在http协议允许下，制定了数据传输必须遵守的规则：  1)...
vue项目axios.create报错
01-10
根据提供的引用内容，你在使用Vue项目中的axios.create方法时遇到了报错。报错信息为"TypeError: Cannot set properties of undefined (setting 'msg')"。这个错误通常是因为你没有正确引入axios或者没有正确配置axios。 为了解决这个问题，你可以按照以下步骤进行操作： 1. 确保你已经正确安装了axios和vue-axios依赖。你可以使用以下命令来安装它们： ```shell npm install axios vue-axios ``` 2. 在你的main.js文件中，确保你正确引入了axios和vue-axios，并将axios添加到Vue的原型链上。你可以按照以下代码示例进行修改： ```javascript import axios from 'axios' import VueAxios from 'vue-axios' import Vue from 'vue' Vue.use(VueAxios, axios) ``` 3. 确保你在使用axios.create方法之前已经正确引入了axios。你可以按照以下代码示例进行修改： ```javascript import axios from 'axios' const instance = axios.create({ baseURL: 'https://api.example.com' }) ``` 请注意，上述代码示例中的baseURL是一个示例，你需要根据你的实际需求进行修改。 如果你仍然遇到报错，请检查你的代码是否有其他错误或者是否有其他地方对axios进行了重写或者修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值