vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式
更新時間：2023年05月24日 08:41:43 作者：尋ing
這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
axios form-data格式 傳輸數(shù)據(jù)和文件
form-data是在post請求下的一種傳輸方式，數(shù)據(jù)會在Form Data中傳輸，他的格式不是正常的JSON格式傳輸?shù)模瑐鬏數(shù)臄?shù)據(jù)由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" ......此處省略一堆參數(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
開頭處我們說了form-data的傳輸格式，我們需要使用到formData對象
new FormData()
比如我們需要傳輸?shù)膶ο笫?/p>
{
name: '小紅',
age: 18,
file: File {name: "xxx.jpg",...} // 一個圖片文件
}可以先創(chuàng)建一個FormData對象，然后通過.append(key,val)的方式將需要的內(nèi)容放在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結(jié)合提交文件 上傳文件
---再利用Vue、axios、FormData做上傳文件時，遇到一個問題，后臺雖然接收到請求，但是將文件類型識別成了字符串，所以，web端一直報500，結(jié)果是自己大意了。
1.因為使用了new FormData來操作表單
并且在測試模擬請求時，從消息頭里看到的確實是表單提交【Content-Type: multipart/form-data】. 所以就沒有單獨在設(shè)置.
結(jié)果后來加上了這個配置才可以通過了。
這個必須設(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' //之前說的以表單傳數(shù)據(jù)的格式來傳遞fromdata
}
};
this.$http.post('/upload', formData, config).then( (res) => {
//做處理
}).catch((error) =>{
});
}
}
};
</script>
<style lang="css" scoped>
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue實現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue中使用el-dropdown方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
將 unix 時間戳轉(zhuǎn)換為日期時間和使用日期時間轉(zhuǎn)換為 unix 時間戳,在項目中常常用到,其中vue中的moment庫很是方便,下面小編就來為大家講講具體使用吧2023-09-09
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue項目中常常會用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中圖片加載不出來的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)省市區(qū)三級聯(lián)動el-select組件的方法，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的的可以參考一下2023-02-02