基于SpringBoot实现上传2种方法工程代码实例

下面是关于“基于SpringBoot实现上传2种方法工程代码实例”的攻略：

1. 概述

SpringBoot提供了很多方便开发的功能，其中之一就是文件上传。文件上传需要前端页面和后端接口配合实现。前端页面负责UI界面展示和获取用户输入，后端接口负责接收上传的文件并保存在服务器上。

2. 文件上传方法

2.1. 前端表单上传

前端表单上传是指用户在页面上填写表单，选择文件，然后提交表单实现上传。具体实现过程如下：

2.1.1. 页面设计

<form method="post" action="/upload" enctype="multipart/form-data">
    <div>
        <label for="name">文件名：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="file">选择文件：</label>
        <input type="file" id="file" name="file">
    </div>
    <button type="submit">上传</button>
</form>

用户在此页面上输入文件名和选择文件，点击上传按钮即可实现文件上传。其中enctype属性必须设置为multipart/form-data，否则文件内容无法正确传输。

2.1.2. 后端代码实现

@Controller
public class UploadController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file, @RequestParam("name") String name) throws IOException {
        byte[] content = file.getBytes();
        // 将文件内容保存到服务器磁盘
        Path path = Paths.get("./", name);
        Files.write(path, content);
        return "redirect:/";
    }
}

使用@RequestParam注解可以从前端传递的参数中获取name和file参数。其中，MultipartFile类封装了上传的文件内容，并提供了getBytes()方法用于获取字节数组。最后将文件保存在服务器磁盘。

2.2. 前端API上传

前端API上传是通过前端JavaScript代码实现文件上传，无需填写表单，适用于一些需要动态上传文件的场景。具体实现过程如下：

2.2.1. 页面设计

<input type="file" id="file" name="file">

<script>
    // 页面加载完成后绑定上传文件事件
    window.onload = function() {
        document.getElementById("file").addEventListener("change", uploadFile);
    };

    // 上传文件
    function uploadFile() {
        var file = document.getElementById("file").files[0];

        var formData = new FormData();
        formData.append("file", file);

        var request = new XMLHttpRequest();

        // 监听状态变化
        request.onreadystatechange = function() {
            if (request.readyState === 4 && request.status === 200) {
                console.log("上传成功");
            }
        };

        // 发送请求
        request.open("POST", "/upload", true);
        request.send(formData);
    }
</script>

用户只需选择文件，JavaScript代码即可自动发送请求并上传文件。在此调用XMLHttpRequest对象来实现请求，FormData类封装了需要上传的文件，添加相应的数据即可。

2.2.2. 后端代码实现

@RestController
public class UploadApiController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) throws IOException {
        byte[] content = file.getBytes();
        // 将文件内容保存到服务器磁盘
        String fileName = file.getOriginalFilename();
        Path path = Paths.get("./", fileName);
        Files.write(path, content);
        return "上传成功";
    }
}

与前面的表单上传不同，这里不再需要获取名称参数，只需从请求的MultipartFile中获取文件内容并保存即可。

3. 总结

本文讲解了如何使用SpringBoot实现文件上传，包含了利用前端表单和API两种方式来实现上传功能。其中前端表单上传主要使用@RequestParam注解来获取上传的文件内容和名称参数，而前端API上传主要使用JavaScript来完成文件上传的请求。如果您想查看更多SpringBoot的应用，请参阅SpringBoot官方文档。