本文已参与「新人创作礼」活动，一起开启掘金创作之路。

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

FormData接口提供了一种表示表单数据的键值对key/value的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send()方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式（解释来源于MDN Web Docs 社区）

开头处我们说了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"
    }
})