vue axios form-data格式传输数据和文件方式
作者:寻ing 时间:2024-04-30 10:18:57
axios form-data格式 传输数据和文件
form-data是在post请求下的一种传输方式,数据会在Form Data中传输,他的格式不是正常的JSON格式传输的,传输的数据由boundary
(例子中的------WebKitFormBoundaryRO0YA4pq9oCgwTkt
)来分割
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="id"
undefined
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="type"
1
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="name"
......此处省略一堆参数
------WebKitFormBoundaryRO0YA4pq9oCgwTkt--
开始
默认的headers
中的Content-Type
是application/x-www-form-urlencoded
,首先要把Content-Type
改为
multipart/form-data; boundary={boundary}
(boundary
找你的后端要)
axios({
url: "/aaa/bbb",
method: 'post',
data: xxx,
headers: {"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0" }
})
// 或者在路由拦截中统一修改
service.interceptors.request.use(
req => {
req.headers = {
// 'Content-Type': 'application/json',
'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0',
}
return req;
}
FormData
开头处我们说了form-data
的传输格式,我们需要使用到formData对象
new FormData()
比如我们需要传输的对象是
{
name: '小红',
age: 18,
file: File {name: "xxx.jpg",...} // 一个图片文件
}
可以先创建一个FormData
对象,然后通过.append(key,val)
的方式将需要的内容放在FormData
对象中,传参时把这个对象传过去就可以了
let formData = new FormData();
formData.append('name','小红');
formData.append('age',18);
formData.append('file',File文件);
传输
整体传输示例
// html
<input type="file" ref="input" />
// js
let formData = new FormData();
formData.append('name','小红');
formData.append('age',18);
formData.append('file',this.$refs.input.files[0]);
let url = '你的请求地址'
axios.post(url,formData,{
headers:{
"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0"
}
})
vue axios与FormData结合提交文件 上传文件
---再利用Vue、axios、FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了。
1.因为使用了new FormData来操作表单
并且在测试模拟请求时,从消息头里看到的确实是表单提交【Content-Type: multipart/form-data】. 所以就没有单独在设置.
结果后来加上了这个配置才可以通过了。
这个必须设置:Content-Type: multipart/form-data
2.结合Vue、axios、FormData使用的例子
<template>
<div id="sample">
<!--accept定义接收的文件类型,这里只接受图片-->
<input id="fileinput" @change="uploading($event)" type="file" accept="image/*">
<button @click="submit($event)"></button>
</div>
</template>
<script>
export default {
name: 'sample',
data () {
return {
file:'',
src:''
};
},
methods:{
uploading(event){
this.file = event.target.files[0];//获取文件
var windowURL = window.URL || window.webkitURL;
this.file = event.target.files[0];
//创建图片文件的url
this.src = windowURL.createObjectURL(event.target.files[0]);
},
submit(){
event.preventDefault();//取消默认行为
let formdata = new FormData();
formdata.append('file',this.file);
//此处必须设置为 multipart/form-data
let config = {
headers: {
'Content-Type': 'multipart/form-data' //之前说的以表单传数据的格式来传递fromdata
}
};
this.$http.post('/upload', formData, config).then( (res) => {
//做处理
}).catch((error) =>{
});
}
}
};
</script>
<style lang="css" scoped>
</style>
来源:https://blog.csdn.net/block_xu/article/details/108490016
标签:vue,axios,form-data,传输数据,文件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
深入Golang的接口interface
2024-02-20 14:12:00
![](https://img.aspxhome.com/file/2023/8/109758_0s.webp)
python多线程同步实例教程
2022-08-15 20:45:19
![](https://img.aspxhome.com/file/2023/0/85320_0s.png)
selenium+python截图不成功的解决方法
2021-06-02 23:25:06
MySQL转义字符的实际应用
2010-08-31 14:55:00
Mysql中索引和约束的示例语句
2024-01-15 18:56:30
Python获取脚本所在目录的正确方法
2022-12-07 14:37:36
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2023-11-14 14:01:31
![](https://img.aspxhome.com/file/2023/3/88293_0s.jpg)
python实现读取大文件并逐行写入另外一个文件
2021-02-03 21:10:45
python处理DICOM并计算三维模型体积
2022-07-16 09:24:29
自己收集比较强大的分页存储过程 推荐
2011-11-03 17:10:20
利用C#实现分布式数据库查询
2024-01-24 18:25:28
![](https://img.aspxhome.com/file/2023/7/116547_0s.jpg)
Mysql删除重复数据并且只保留一条(附实例!)
2024-01-27 04:48:27
![](https://img.aspxhome.com/file/2023/8/122348_0s.png)
使用python实现离散时间傅里叶变换的方法
2021-10-26 19:44:07
![](https://img.aspxhome.com/file/2023/1/66451_0s.png)
Python中的list与tuple集合区别解析
2023-01-13 11:05:23
SqlServer 在事务中获得自增ID的实例代码
2024-01-24 19:27:36
Go如何优雅的使用字节池示例详解
2024-02-10 21:10:17
使用Dajngo 通过代码添加xadmin用户和权限(组)
2021-08-07 17:43:59
GO语言延迟函数defer用法详解
2024-02-18 16:56:27
![](https://img.aspxhome.com/file/2023/8/105128_0s.png)
Go语言中的range用法实例分析
2024-04-30 10:03:18
MySQL高级查询语法分析
2024-01-13 14:11:09
![](https://img.aspxhome.com/file/2023/3/76363_0s.jpg)