vue的文件上传

最新推荐文章于 2025-07-09 14:23:59 发布

原创最新推荐文章于 2025-07-09 14:23:59 发布 · 5.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #java

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue.js项目中实现文件上传功能，包括使用input组件触发文件选择，通过axios发送POST请求携带文件，以及后台接收文件的具体步骤。

步骤

在input组件中添加点击事件@change=“upload”
在事件处理函数中传入事件对象，通过事件对象获取文件对象e.target.files[0]
创建表单对象let formData = new FormData();
放入文件对象 formData.append(“file”,e.target.files[0]);
通过axios设置请求头headers:{‘content-type’:‘multipart/form-data’}和提交方式post
后台通过上传对象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>

后台

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