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
});
}
}
是不是很简单呀！反正我是实现了，有问题可以讨论下哦。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。