vue的文件上传

步骤

1. 在input组件中添加点击事件@change=“upload”

2. 在事件处理函数中传入事件对象，通过事件对象获取文件对象e.target.files[0]

3. 创建表单对象let formData = new FormData();

4. 放入文件对象 formData.append(“file”,e.target.files[0]);

5. 通过axios设置请求头headers:{‘content-type’:‘multipart/form-data’}和提交方式post

6. 后台通过上传对象MultipartFile file接受页面：

<div id="div1">
   <input type="file" accept=".xls,.xsls"  @change="upload"/>
</div>			
<script>
   	var vm = new Vue({
   		el:'#app',
   		/*
   		由于vue的响应式原理   data 如果是一个对象，对象中使用this不会自动绑定为vue对象，需要通过回调函数方式，vue才会在调用该函数的时候，进行双向绑定，并且自动传入
   		当前vue对象到函数中
   		*/
   		data:function(){
   			console.log(this);
   			return {
   				file:''
   			}
   			
   		},
   		methods:{
   			upload:function(e){
   				this.file = e.target.files[0];
   				console.log(this.file);
   				let formData = new FormData();
   				formData.append("file",this.file);
   				axios({
   					method:'post',
   					headers:{'content-type':'multipart/form-data'},
   					url:'/guguanjia/manager/area/importExcel',
   					data:formData
   				}).then(response =>{
   					console.log(response.data);
   				}).catche(function(error){
   					
   				});
   				
   			}
   		}
   		
   	});
</script>

7. 后台

@RequestMapping("importExcel")
   public void importExcel(@RequestParam("file")MultipartFile file){
       System.out.println((file.getOriginalFilename()));
       。。。
   }