vue axios 表單提交上傳圖片的實(shí)例
更新時(shí)間：2018年03月16日 10:01:03 作者：qq_25186543
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
項(xiàng)目中用的element 的框架，然后在項(xiàng)目有一個(gè)添加數(shù)據(jù)需求是圖片可上傳，也可不上傳，
然后問(wèn)題就是element 中的上傳控件在沒(méi)有圖片的時(shí)候是不會(huì)觸發(fā)提交的，但接口寫(xiě)的是有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對(duì)象
param.append('file',file,file.name);//通過(guò)append向form對(duì)象添加數(shù)據(jù)
param.append('chunk','0');//添加form表單中其他數(shù)據(jù)
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加請(qǐng)求頭
this.axios.post('http://upload.qiniu.com/',param,config)
.then(response=>{
console.log(response.data);
})
以上這篇vue axios 表單提交上傳圖片的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3無(wú)法使用jsx的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊當(dāng)前路由高亮小案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本篇文章主要介紹了vue-cli如何添加less 以及sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要為大家介紹了vue3中的透?jìng)鱝ttributes教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3使用訊飛大模型的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹了Vue編寫(xiě)自定義Plugin詳解,在Vue開(kāi)發(fā)中，我們經(jīng)常需要使用一些第三方庫(kù)或功能性模塊，Vue插件就是一種將這些庫(kù)或模塊集成到Vue應(yīng)用中的方式,插件是Vue.js提供的一種機(jī)制，用于擴(kuò)展Vue的功能,需要的朋友可以參考下2023-08-08
VUE div click無(wú)效的問(wèn)題及解決
這篇文章主要介紹了VUE div click無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)簡(jiǎn)單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue-cli + sass 的正確打開(kāi)方式圖文詳解
本文通過(guò)圖文并茂的形式給大家介紹了vue-cli + sass 的正確打開(kāi)方式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10