vue axios form-data格式 传输数据和文件
vue axios form-data格式 传输数据和文件form-data在post请求下的一种传输方式,数据会在Form Data中传输,传输的数据由boundary来分割------WebKitFormBoundaryRO0YA4pq9oCgwTktContent-Disposition: form-data; name="id"undefined------WebKitFormBounda
·
vue 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"
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)