在Spring Boot和Vue前后端分离的项目中,文件上传通常涉及到后端接收文件和在前端选择文件。以下是两种常见的文件上传方式:
方式二:使用Base64编码上传图片
在某些场景下,我们可能不希望直接传输文件,而是想要将文件转换为一个字符串,然后通过API传输这个字符串。在Vue中,我们可以使用Base64来实现这种方式的文件上传。
后端代码:
@PostMapping("/uploadBase64Image")
public Result uploadBase64Image(@RequestParam("image") String image) {
// 解析Base64字符串并保存为文件
// ...
return Result.success();
}
前端代码:
methods: {
uploadBase64Image(file) {
// 将文件转换为Base64字符串
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
let base64Image = e.target.result;
// 发送请求上传Base64字符串
axios.post('/uploadBase64Image', {
image: base64Image
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
};
}
}
在这个例子中,前端将图片文件转换为Base64字符串,然后发送到后端,后端再将Base64字符串转换为文件进行保存。
注意:使用Base64上传文件会增加请求的大小和处理的复杂性,因此不推荐上传大文件。