快捷導(dǎo)航

vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式

更新時(shí)間：2023年05月24日 08:41:43 作者：尋ing

這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

axios form-data格式傳輸數(shù)據(jù)和文件

form-data是在post請(qǐng)求下的一種傳輸方式，數(shù)據(jù)會(huì)在Form Data中傳輸，他的格式不是正常的JSON格式傳輸?shù)?，傳輸?shù)臄?shù)據(jù)由boundary（例子中的------WebKitFormBoundaryRO0YA4pq9oCgwTkt）來(lái)分割

------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="id"
undefined
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="type"
1
------WebKitFormBoundaryRO0YA4pq9oCgwTkt
Content-Disposition: form-data; name="name"
......此處省略一堆參數(shù)
------WebKitFormBoundaryRO0YA4pq9oCgwTkt--

開始

默認(rèn)的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" }
})
// 或者在路由攔截中統(tǒng)一修改
service.interceptors.request.use(
req => {
    req.headers = {
        // 'Content-Type': 'application/json',
        'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0',
    }
    return req;
}

FormData

開頭處我們說(shuō)了form-data的傳輸格式，我們需要使用到formData對(duì)象

new FormData()

比如我們需要傳輸?shù)膶?duì)象是

{
    name: '小紅',
    age: 18,
    file: File {name: "xxx.jpg",...} // 一個(gè)圖片文件
}

可以先創(chuàng)建一個(gè)FormData對(duì)象，然后通過(guò).append(key,val)的方式將需要的內(nèi)容放在FormData對(duì)象中，傳參時(shí)把這個(gè)對(duì)象傳過(guò)去就可以了

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 = '你的請(qǐng)求地址'
axios.post(url,formData,{
    headers:{
        "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryn8D9asOnAnEU4Js0"
    }
})

vue axios與FormData結(jié)合提交文件上傳文件

---再利用Vue、axios、FormData做上傳文件時(shí)，遇到一個(gè)問(wèn)題，后臺(tái)雖然接收到請(qǐng)求，但是將文件類型識(shí)別成了字符串，所以，web端一直報(bào)500，結(jié)果是自己大意了。

1.因?yàn)槭褂昧薾ew FormData來(lái)操作表單

并且在測(cè)試模擬請(qǐng)求時(shí)，從消息頭里看到的確實(shí)是表單提交【Content-Type: multipart/form-data】. 所以就沒(méi)有單獨(dú)在設(shè)置.

結(jié)果后來(lái)加上了這個(gè)配置才可以通過(guò)了。

這個(gè)必須設(shè)置：Content-Type: multipart/form-data

2.結(jié)合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];
        //創(chuàng)建圖片文件的url
        this.src = windowURL.createObjectURL(event.target.files[0]);
   },
   submit(){
   event.preventDefault();//取消默認(rèn)行為
   let formdata = new FormData();
   formdata.append('file',this.file);
//此處必須設(shè)置為  multipart/form-data
let config = {
            headers: {
                'Content-Type': 'multipart/form-data'  //之前說(shuō)的以表單傳數(shù)據(jù)的格式來(lái)傳遞fromdata
            }
        };
        this.$http.post('/upload', formData, config).then( (res) => {
       //做處理
    }).catch((error) =>{
    });
   }
  }
};
</script>
<style lang="css" scoped>
</style>