前端
<template>
<div>
<!-- 选择要上传的文件 -->
<input type="file" ref="uploadInput">
<!-- 点击按钮触发文件上传事件 -->
<button @click="handleUpload">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
handleUpload() {
// 获取到选择的文件对象
const file = this.$refs.uploadInput.files[0];
if (file) {
// 创建 FormData 对象并将文件添加到其中
let formData = new FormData();
formData.append('file1', file);
// 发送 POST 请求，将文件数据作为表单数据提交
axios.post('http://localhost:8082/springmvcstudy/upload', formData).then(response => {
console.log(res);
// 这里可以根据服务器返回的结果进行相应操作
}).catch(error => {
console.error('文件上传失败', error);
});
} else {
console.warn('未选择任何文件');
}
}
}
}
</script>
controller##
@RestController
public class UploadController {
/* file1跟前台的name属性对应*/
@PostMapping("upload")
public String upload(MultipartFile file1){
//获取原始文件名
System.out.println(file1.getOriginalFilename());
return "success";
}
}
