溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中怎么利用axios實(shí)現(xiàn)表單提交上傳圖片

發(fā)布時(shí)間：2021-07-09 14:58:51 來源：億速云 閱讀：349 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了vue中怎么利用axios實(shí)現(xiàn)表單提交上傳圖片，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

項(xiàng)目中用的element 的框架，然后在項(xiàng)目有一個(gè)添加數(shù)據(jù)需求是圖片可上傳，也可不上傳，

然后問題就是element 中的上傳控件在沒有圖片的時(shí)候是不會(huì)觸發(fā)提交的，但接口寫的是有file的  multipart/form-data    接收模式

所有只能自己另個(gè)模仿一個(gè)表單上傳

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
let file = e.target.files[0];    
   let param = new FormData(); //創(chuàng)建form對象 
   param.append('file',file,file.name);//通過append向form對象添加數(shù)據(jù) 
   param.append('chunk','0');//添加form表單中其他數(shù)據(jù) 
   
   let config = { 
   headers:{'Content-Type':'multipart/form-data'} 
   }; //添加請求頭 
   this.axios.post('http://upload.qiniu.com/',param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })

上述內(nèi)容就是vue中怎么利用axios實(shí)現(xiàn)表單提交上傳圖片，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手