vue axios传递FormData填坑，headers不显示，后台报错等等问题

你可能在以下vue axios的FormDara的文件上传中，有headers不显示问题，或遇到了以下报错

org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request

网上有很多这类问题的解决方案，而且很简单，很有效，不过，还是要先检查你的vue axios全局配置中是否有配置以下代码

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {data = qs.stringify(data);return data;
};

你默认的axios请求数据被字符串化（stringify），导致了headers不显示，以及以下全系列的报错
哈哈，没想到吧！.jpg

现在可以拍一下自己的脑门，轻微地口吐芬芳，我被这个坑了3天
下面开始正题：


let formData = new FormData();
formData.append("file", file);
formData.append("abc", "223");const instance = this.axios.create({ transformRequest(data) {//直接返回，不做任何处理return data;}
})instance.post(url, formData).then((response) => {console.log(response.data);
}).catch((error) => {console.log(error);
});

覆盖默认值就欧克了，headers也显示出来了，后台错误也不报了

亲测有效，成功示例图.jpg

如果后台还是这类报错，也有以下解决方案
org.springframework.web.util.NestedServletException: Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Failed to parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

let config = {headers: {'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()}
};this.axios.post(url, formData, config).then((response) => {console.log(response.data);
}).catch((error) => {console.log(error);
});

后台报错解决参考地址：https://blog.csdn.net/qq_41688165/article/details/80834842
原创地址：https://blog.csdn.net/wojiaoYBT/article/details/104234957

vue axios传递FormData填坑，headers不显示，后台报错等等问题相关推荐

python find函数_Python 装饰器填坑指南 | 最常见的报错信息、原因和解决方案
本文为霍格沃兹测试学院学员学习笔记,进阶学习文末加群. Python 装饰器简介装饰器(Decorator)是 Python 非常实用的一个语法糖功能.装饰器本质是一种返回值也是函数的函数,可以称之 ...
vue渲染时数据对象里面的子对象的属性报错undefined，但页面正常渲染
vue渲染时数据对象里面的子对象的属性报错undefined,但页面正常渲染. 报如图所示错误页面中报错的位置原因是在data中申明了空对象,页面在渲染的时候,数据还没获取到的时候,首先渲染的是初 ...
Vue axios 发送 FormData 请求
一.简介 axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换. Payload 和 Form Data 的主要设置是根据 ...
vue ts项目同时引入ant-design和element-ui，ts报错不能编译打包失败
错误信息: Subsequent property declarations must have the same type. Property '$confirm' must be of type ...
vue 路由里关于 TypeError: Converting circular structure to JSON 报错问题
首先放上报错内容 TypeError: Converting circular structure to JSON –> starting at object with constructor ...
如何解决@RequestParam无法接收vue+axios传递json数据
文章目录 axios的post请求无法发送到后端 1.问题 : axios的post的传递的json数据无法接收 2.问题代码 3.问题归因 4.问题解决 5.查漏补缺 axios的post请求无法发 ...
axios传递数据到java_axios 传输与springboot后台接收数据
axios 使用不再说明,直指常见问题元凶: 1.get(url[, config])和post(url[, data[, config]]),注意参数 get是在config中设置params{pa ...
vue使用百度地图GL 卫星地球地图避坑一 BMAP_EARTH_MAP出现 undefined报错的问题
使用百度地图实现卫星地图功能: bmapgl示例中心中关于地球的示例是这么写的: 但是在使用的时候你就会发现,这个东西已经改名了,所以会报错undefined 你可以改成这个试试: this.map. ...
vue重启node_【ts】vue-typescript-admin类型any仍然报错
1.Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.Property 'validate' ...

vue axios传递FormData填坑，headers不显示，后台报错等等问题

vue axios传递FormData填坑，headers不显示，后台报错等等问题

vue axios传递FormData填坑，headers不显示，后台报错等等问题相关推荐

最新文章

热门文章