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