vue实现axios图片上传功能
vue中实现图片上传,我这里使用的是FormData通过axios向后台发送请求,从而实现图片的上传。
在发起请求的axios中一般用qs进行序列化,但是序列化之后,FormData就传送失败,所以要区别传送的数据类型。
经过多次摸索总结了以下经验,以供参考。
首先创建一个文件夹services,里面有两个文件index.js和api.js。
我们的qs序列化和数据拦截写在index.js中
importaxiosfrom"axios"; importconfigfrom"@/config"; importrouterfrom"@/router"; importvalidatefrom"@/util/validate"; importQsfrom"qs"; constrequest=axios.create({ baseURL:config.hostUrl, timeout:52000, transformRequest:[ (data)=>{ returndatainstanceofFormData?data:Qs.stringify({//此处的data类型判断为重要点, ...data }); } ] }); request.interceptors.request.use(//请求拦截 config=>{ returnconfig; }, error=>Promise.error(error) ); request.interceptors.response.use(//响应拦截器 asyncfunction(res){ if(res.status===200){ returnPromise.resolve(res.data); }else{ returnPromise.reject(res.data); } }, asyncfunction(error){ const{ response }=error; if(response){ returnPromise.reject(response); }else{ } } ); exportdefaultrequest;
写好上面的代码在api.js请求接口就无须做任何操作了,下面示例:
asyncupImgs(files){//我的相册图片上传 return(awaitrequest.post('/basis/uploadFile',files)).response },
页面调用接口
asyncfile_up(event){ //图片预览 try{ letres=null; this.file=[...event.target.files]; for(leti=0,f;(f=this.file[i]);i++){ if(i>=8||this.imgs.length>=8){ return; } letfileImg=newFormData(); fileImg.append("file",f); res=awaitthis.$api.upImgs(fileImg);//这里是调用api处,此处为多图上传,供参考 if(res.result){ this.imgs.push(res.result.absoluteFilePath); } } }catch(err){ this.$toast({ message:err.message, duration:1200 }); } }
是不是很简单呀!反正我是实现了,有问题可以讨论下哦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。