axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法
更新時間:2018年03月16日 10:30:11 作者:crli
下面小編就為大家分享一篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
DOME
<input type="file" @change="upload" ref="upload">
接口
const userUploadAtt = (File,config) => axios.post("接口",File,config)
處理數(shù)據(jù)
let input = this.$refs.upload
創(chuàng)建一個空的FormData對象
let data = new FormData();
使用FormData.append來添加鍵/值對到表單里面;
data.append('file', input.files[0]);
upload(){
userUploadAtt(data,{headers: {'Content-Type': 'multipart/form-data'}}).then((response)=>{
this.headPhoto = response.data[0].msg.url;
}).catch(()=>{
})
}
注意:
如果
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' post請求時候表單上傳不需要引入qs.stringify()
以上這篇axios發(fā)送post請求,提交圖片類型表單數(shù)據(jù)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
babel7.x和webpack4.x配置vue項目的方法步驟
這篇文章主要介紹了babel7.x和webpack4.x配置vue項目的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue-router history模式下的微信分享小結(jié)
本篇文章主要介紹了vue-router history模式下的微信分享小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue?圖片監(jiān)聽鼠標滑輪滾動實現(xiàn)圖片縮小放大功能(實現(xiàn)思路)
其實想要實現(xiàn)功能很簡單,就是在一張圖片上監(jiān)聽鼠標滑輪滾動的事件,然后根據(jù)上滾還是下滾實現(xiàn)圖片的縮放,這篇文章主要介紹了Vue?實現(xiàn)圖片監(jiān)聽鼠標滑輪滾動實現(xiàn)圖片縮小放大功能,需要的朋友可以參考下2023-03-03
Vue報錯Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報錯Component?name"Home"should?always?be?multi問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09

