Vue formData实现图片上传
本文实例为大家分享了VueformData实现图片上传的具体代码，供大家参考，具体内容如下
importVuefrom'vue'
/**
*图片上传
*已注入所有Vue实例，
*template模板里调用$uploadFile(id)
*组件方法里调用this.$uploadFile(id)
*/
constuploadFile=(id)=>{
letpromise=newPromise((resolve,reject)=>{
letfile=null
letel=null
leti=0
letformData=newFormData()
document.getElementById(id).click()
el=document.getElementById(id)
el.addEventListener('change',function(e){
i++
if(i!==1){
returnfalse
}else{
file=this.files[0]
formData.append('file',file)
formData.append('fileType','IMAGE')
//数据请求
Vue.axiosfrom(Vue.api.upload,formData).then(res=>{
//返回图片url
resolve(res)
}).catch(err=>{
reject(err)
})
}
})
})
returnpromise
}
Vue.prototype.$uploadFile=uploadFile
axios请求头设置
importVuefrom'vue'
import{baseURL}from'@/config/env'
importaxiosfrom'axios'
//formdata请求
constaxiosT=axios.create({
baseURL:baseURL,
headers:{
'Content-Type':'multipart/form-data'
}
})
constXHR=({method='post',qs=true,loading=false,loginRequire=true,reqComplex=false,reqContentType='urlencoded'})=>{
//带请求进度条成功方法
constsucFunX=res=>{
returnres.data
}
//成功执行方法
constsucFunC=res=>{
returnres.data
}
//带请求进度条失败方法
consterrFunX=err=>{
console.log(err,NProgress.done())
}
//失败执行访求
consterrFunC=err=>{
console.log(err)
}
//判断是否需要Longing
constsucFun=loading?sucFunX:sucFunC
//判断是否需要Longing
consterrFun=loading?errFunX:errFunC
return{user,sucFun,errFun}
}
//表单请求图片上传
constaxiosfrom=function(url='',data={}){
let{sucFun,errFun}=XHR({loading:false})
returnaxiosT.post(url,data).then(sucFun).catch(errFun)
}
//表单请求
Vue.prototype.$axiosfrom=axiosfrom
Vue.axiosfrom=axiosfrom
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。