VUE+SpringBoot实现文件异步上传

小灰灰 2022-05-14 01:37 434阅读 0赞

@RequestMapping("/upload")
    	@ResponseBody
    	public void upload(@RequestParam("file")MultipartFile  file[]){
    		MultipartFile multipartFile = file[0];
    		System.out.println("文件名称"+multipartFile.getOriginalFilename());
    	}

<template>
    	<div>
    		<form>
    			<input type="text" value="" v-model="name" placeholder="请输入用户名">
    			<input type="text" value="" v-model="age" placeholder="请输入年龄">
    			<input type="file" @change="getFile($event)">
    			<button @click="submitForm($event)">提交</button>
    		</form>
    
    	</div>
    </template>
    
    <script>
    	import axios from 'axios';
    	axios.defaults.withCredentials = true;
    	export default {
    		data() {
    			return {
    				name: '',
    				age: '',
    				file: ''
    			}
    
    		},
    		methods: {
    			getFile(event) {
    				this.file = event.target.files[0];
    				console.log(this.file);
    			},
    			submitForm(event) {
    				event.preventDefault();
    				let formData = new FormData();
    				formData.append('name', this.name);
    				formData.append('age', this.age);
    				formData.append('file', this.file);
    
    				let config = {
    					headers: {
    						'Content-Type': 'multipart/form-data'
    					}
    				}
    
    				axios.post('http://localhost:8082/user/upload', formData, config).then(function(response) {
    					if(response.status === 200) {
    						console.log(response.data);
    					}
    				})
    			}
    		}
    
    	}
    </script>
    
    <style>
    
    </style>

把event去掉也对，即：

<template>
    	<div>
    		<form>
    			<input type="text" value="" v-model="name" placeholder="请输入用户名">
    			<input type="text" value="" v-model="age" placeholder="请输入年龄">
    			<input type="file" @change="getFile()">
    			<button @click="submitForm()">提交</button>
    		</form>
    
    	</div>
    </template>
    
    <script>
    	import axios from 'axios';
    	axios.defaults.withCredentials = true;
    	export default {
    		data() {
    			return {
    				name: '',
    				age: '',
    				file: ''
    			}
    
    		},
    		methods: {
    			getFile() {
    				this.file = event.target.files[0];
    				console.log(this.file);
    			},
    			submitForm() {
    			//	event.preventDefault();
    				let formData = new FormData();
    				formData.append('name', this.name);
    				formData.append('age', this.age);
    				formData.append('file', this.file);
    
    				let config = {
    					headers: {
    						'Content-Type': 'multipart/form-data'
    					}
    				}
    
    				axios.post('http://localhost:8082/user/upload', formData, config).then(function(response) {
    					if(response.status === 200) {
    						
    						console.log(response.data);
    					}
    				})
    			}
    		}
    
    	}
    </script>
    
    <style>
    
    </style>