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