vue axios 表單提交上傳圖片的實例
更新時間：2018年03月16日 10:01:03 作者：qq_25186543
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
項目中用的element 的框架，然后在項目有一個添加數(shù)據(jù)需求是圖片可上傳，也可不上傳，
然后問題就是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ù)據(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);
})
以上這篇vue axios 表單提交上傳圖片的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
后臺使用freeMarker和前端使用vue的方法及遇到的問題
這篇文章主要介紹了后臺使用freeMarker和前端使用vue的方法及遇到的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章大家分享了vue中axios的封裝的相關(guān)知識點以及實例代碼，有興趣的朋友參考學習下。2018-07-07
el-form組件提供了表單驗證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設置prop屬性來進行校驗,這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue.js 通過jQuery ajax獲取數(shù)據(jù)實現(xiàn)更新后重新渲染頁面的方法
今天小編小編就為大家分享一篇Vue.js 通過jQuery ajax獲取數(shù)據(jù)實現(xiàn)更新后重新渲染頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue3?響應式系統(tǒng)實現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應式系統(tǒng)實現(xiàn)?computed，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06
基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當前時間實時定位功能
這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當前時間實時定位功能,開始時間、結(jié)束時間可配置，根據(jù)當前時間初始化位置，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
雖然Vue.js作為一個現(xiàn)代化的前端框架,鼓勵使用其自身的響應式機制來處理DOM操作,但在某些情況下,尤其是在需要維護舊系統(tǒng)的項目中,可能會遇到需要引入jQuery的情況,本文將詳細講解如何在Vue項目中引入jQuery,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)菜單切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要給大家介紹了關(guān)于Vue項目引發(fā)的「過濾器」使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
在日常開發(fā)中,特別是管理端,經(jīng)常會遇到要實現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實用功能之實現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10