Vue formData實現(xiàn)圖片上傳
更新時間:2021年09月03日 16:24:06 作者:Ajaxguan
這篇文章主要為大家詳細介紹了Vue formData實現(xiàn)圖片上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue formData實現(xiàn)圖片上傳的具體代碼,供大家參考,具體內(nèi)容如下
import Vue from 'vue'
/**
* 圖片上傳
* 已注入所有Vue實例,
* template模板里調(diào)用 $uploadFile(id)
* 組件方法里調(diào)用 this.$uploadFile(id)
*/
const uploadFile = (id) => {
let promise = new Promise((resolve, reject) => {
let file = null
let el = null
let i = 0
let formData = new FormData()
document.getElementById(id).click()
el = document.getElementById(id)
el.addEventListener('change', function (e) {
i++
if (i !== 1) {
return false
} else {
file = this.files[0]
formData.append('file', file)
formData.append('fileType', 'IMAGE')
// 數(shù)據(jù)請求
Vue.axiosfrom(Vue.api.upload, formData).then(res => {
// 返回圖片url
resolve(res)
}).catch(err => {
reject(err)
})
}
})
})
return promise
}
Vue.prototype.$uploadFile = uploadFile
axios請求頭設置
import Vue from 'vue'
import { baseURL } from '@/config/env'
import axios from 'axios'
// formdata 請求
const axiosT = axios.create({
baseURL: baseURL,
headers: {
'Content-Type': 'multipart/form-data'
}
})
const XHR = ({method = 'post', qs = true, loading = false, loginRequire = true, reqComplex = false, reqContentType = 'urlencoded'}) => {
// 帶請求進度條成功方法
const sucFunX = res => {
return res.data
}
// 成功執(zhí)行方法
const sucFunC = res => {
return res.data
}
// 帶請求進度條失敗方法
const errFunX = err => {
console.log(err, NProgress.done())
}
// 失敗執(zhí)行訪求
const errFunC = err => {
console.log(err)
}
// 判斷是否需要Longing
const sucFun = loading ? sucFunX : sucFunC
// 判斷是否需要Longing
const errFun = loading ? errFunX : errFunC
return {user, sucFun, errFun}
}
// 表單請求 圖片上傳
const axiosfrom = function (url = '', data = {}) {
let {sucFun, errFun} = XHR({loading: false})
return axiosT.post(url, data).then(sucFun).catch(errFun)
}
// 表單請求
Vue.prototype.$axiosfrom = axiosfrom
Vue.axiosfrom = axiosfrom
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
layui數(shù)據(jù)表格實現(xiàn)重載數(shù)據(jù)表格功能(搜索功能)
這篇文章主要介紹了layui數(shù)據(jù)表格實現(xiàn)重載數(shù)據(jù)表格功能,以搜索功能為例進行講解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07
JavaScript創(chuàng)建命名空間(namespace)的最簡實現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過自定義函數(shù)進行類型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關操作來實現(xiàn)命名空間的功能,需要的朋友可以參考一下2007-12-12
JavaScript實現(xiàn)點擊按鈕后變灰避免多次重復提交
注冊的時候需要發(fā)送驗證激活帳號的郵件,為了避免郵件的多次重復發(fā)送,所以可以在點擊了發(fā)送后,設置按鈕變灰,倒計時一段時間后又可重復點擊,具體實現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07
use jscript List Installed Software
use jscript List Installed Software...2007-06-06
js基于FileSaver.js 瀏覽器導出Excel文件的示例
本篇文章主要介紹了js基于FileSaver.js 瀏覽器導出Excel文件的示例,具有一定的參考價值,有興趣的可以了解一下2017-08-08

