vue使用axios上传文件(FormData)的方法
在此主要介绍如何使用formData对象上传单文件和多文件，FormData就是XMLHttpRequestLevel2新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。
过多介绍不说，过多的煽情语句不说，直接来来干活，希望对广大博友有所帮助。也希望各位大神不吝赐教
1.前台上传文件的表单和响应函数
表单可以根据自己需要选择合适的表单，我在此选用的原生表单。
vue定义文件数据类型：
data(){
return{
//文件
file:'',
file2:'',
}
},
表单按钮的响应函数
getFile(event){
this.file=event.target.files[0];
console.log(this.file);
},
getFile2(event){
this.file2=event.target.files[0];
console.log(this.file2);
},
上传单文件和多文件其实都是一样，主要的区别在后台接受文件形式和前台如何向后台传递数据
主要区别在submit响应函数中。
单文件例子：
submit(event){
event.preventDefault();//取消默认行为
//创建formData对象
letformData=newFormData();
//向formData对象中添加文件
formData.append('file',this.file);
http.uploadFile("taskManage/uploadFile2",formData).then(function(response){
console.log("res:",response);
})
},
多文件例子：
submit(event){
event.preventDefault();//取消默认行为
//创建formData对象
letformData=newFormData();
//向formData对象中添加文件
formData.append('file',this.file);
formData.append('file',this.file2);
http.uploadFile("taskManage/uploadFile2",formData).then(function(response){
console.log("res:",response);
})
},
看到这里是不是感觉很搞笑，单文件和多文件的区别竟然在于向formData中添加了多少个文件。其实技术就是这样，玩过了，就觉得很好玩越来越有兴趣。
注：http.uploadFile是我自己封装的方法，用来上传文件的，为了防止文章没有针对性，就分开写了。
axios和ajax都支持异步请求，两者使用方法大同小异，在此使用axios上传文件的请求。使用的时候只需要在响应的vue组件中引入就可以。
importVuefrom'vue';
importVueCookiefrom'vue-cookie';
importaxiosfrom'axios';
//importtoastrfrom'../assets/toastr.min';
//Vue.use(axios)
lethttp={};
//let_baseURL='/vpaas'
let_baseURL='http://localhost:8080/vpaas'
letContentType="application/json";
letuploadFileType="multipart/form-data";
http.baseURL=_baseURL;
/**
*上传文件的请求
*@paramurl
*@returns{AxiosPromise}
*/
http.uploadFile=function(url,data){
letconfig={
//请求的接口，在请求的时候，如axios.get(url,config);这里的url会覆盖掉config中的url
url:url,
//基础url前缀
baseURL:_baseURL,
transformResponse:[function(data1){
vardata=data1;
if(typeofdata1=="string"){
data=JSON.parse(data1);
}
//这里提前处理返回的数据;
if(data.message&&(data.data==='login.invalid.token')){
window.localStorage.removeItem("access-user");
alert("超时请重新登陆");
window.location.href='/';
}
returndata;
}],
//请求头信息
headers:{'access-user':window.localStorage.getItem('access-user'),'Content-Type':uploadFileType},
//跨域请求时是否需要使用凭证
withCredentials:true,
//返回数据类型
responseType:'json',//default
};
returnaxios.post(url,data,config);
};
哪里理解有误，欢迎各位大神不吝指教。
2：后台接受文件
控制器主要有一个全局的注解：
@RequestMapping("taskManage")
单文件的格式：
/**
*文件接收控制器
*/
@PostMapping("uploadFile")
publicObjectmultipleSave(@RequestParam("file")MultipartFilefile){
logger.info("上传的文件：",file);
logger.info("上传的文件");
returnnull;
}
多文件格式：
后台接受方式有两种，两种都有不同的通途。
接受的文件个数为有限个时：
/**
*文件接收控制器
*/
@PostMapping("uploadFile")
publicObjectmultipleSave(@RequestParam("file")MultipartFilefile,@RequestParam("file2")MultipartFilefile2){
logger.info("上传的文件：",file);
logger.info("上传的文件2：",file2);
logger.info("上传的文件");
returnnull;
}
接受文件个数为无限个时：
@PostMapping("uploadFile")
publicObjectmultipleSave(@RequestParam("file")MultipartFile[]file){
logger.info("上传的文件：",file);
logger.info("上传的文件");
returnnull;
}
利用数组的格式接收多文件，利用for循环就可以取出所有的文件，这里就不做一一解释了。
方法都已经亲测，希望对广大博友有丝毫的帮助。也希望大家多多支持毛票票。