Spring Boot + Vue 前后端分离，两种文件上传方式总结

在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上传文件会增加请求的大小和处理的复杂性，因此不推荐上传大文件。