Vue formData實(shí)現(xiàn)圖片上傳
本文實(shí)例為大家分享了Vue formData實(shí)現(xiàn)圖片上傳的具體代碼,供大家參考,具體內(nèi)容如下
import Vue from 'vue'
/**
* 圖片上傳
* 已注入所有Vue實(shí)例,
* 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ù)請(qǐng)求
Vue.axiosfrom(Vue.api.upload, formData).then(res => {
// 返回圖片url
resolve(res)
}).catch(err => {
reject(err)
})
}
})
})
return promise
}
Vue.prototype.$uploadFile = uploadFile
axios請(qǐng)求頭設(shè)置
import Vue from 'vue'
import { baseURL } from '@/config/env'
import axios from 'axios'
// formdata 請(qǐng)求
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'}) => {
// 帶請(qǐng)求進(jìn)度條成功方法
const sucFunX = res => {
return res.data
}
// 成功執(zhí)行方法
const sucFunC = res => {
return res.data
}
// 帶請(qǐng)求進(jìn)度條失敗方法
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}
}
// 表單請(qǐng)求 圖片上傳
const axiosfrom = function (url = '', data = {}) {
let {sucFun, errFun} = XHR({loading: false})
return axiosT.post(url, data).then(sucFun).catch(errFun)
}
// 表單請(qǐng)求
Vue.prototype.$axiosfrom = axiosfrom
Vue.axiosfrom = axiosfrom
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript 判斷用戶(hù)有沒(méi)有操作頁(yè)面
這篇文章主要介紹了javascript 判斷用戶(hù)有沒(méi)有操作頁(yè)面的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能)
這篇文章主要介紹了layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能,以搜索功能為例進(jìn)行講解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
JavaScript創(chuàng)建命名空間(namespace)的最簡(jiǎn)實(shí)現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過(guò)自定義函數(shù)進(jìn)行類(lèi)型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關(guān)操作來(lái)實(shí)現(xiàn)命名空間的功能,需要的朋友可以參考一下2007-12-12
JavaScript通過(guò)RegExp使用正則表達(dá)式過(guò)程詳解
正則表達(dá)式用于定義一些字符串的規(guī)則。計(jì)算機(jī)可以根據(jù)正則表達(dá)式,來(lái)檢查一個(gè)字符串是否符合指定的規(guī)則,或者將字符串中符合規(guī)則的內(nèi)容提取出來(lái)。RegExp的意思是 Regular expression。使用typeof檢查正則對(duì)象,會(huì)返回object2023-03-03
JavaScript利用正則表達(dá)式去除日期中的“-”
第一種,將日期字符串先截取,然后拼接;第二種,就是利用正則表達(dá)式去掉“-”本例選擇第二種,比較快捷不容易出錯(cuò)2014-07-07
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕后變灰避免多次重復(fù)提交
注冊(cè)的時(shí)候需要發(fā)送驗(yàn)證激活帳號(hào)的郵件,為了避免郵件的多次重復(fù)發(fā)送,所以可以在點(diǎn)擊了發(fā)送后,設(shè)置按鈕變灰,倒計(jì)時(shí)一段時(shí)間后又可重復(fù)點(diǎn)擊,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07
基于JS實(shí)現(xiàn)漫畫(huà)中大雨滂沱的效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)漫畫(huà)中大雨滂沱的效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
use jscript List Installed Software
use jscript List Installed Software...2007-06-06
js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例
本篇文章主要介紹了js基于FileSaver.js 瀏覽器導(dǎo)出Excel文件的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08

