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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。