如何上传包含图像文件的JSON到SpringBootRestAPI？

1. 创建一个模型类，该类包含 JSON 要上传的所有属性，其中包括接受图像文件的 multipart 类型的属性。

public class ImageModel {
    private String name;
    private MultipartFile imageFile;

    // Getters and setters
}

2. 在控制器中，创建一个 PostMapping，该映射将接受 ImageModel 对象作为参数，并将从 JSON 中接收到的图像文件存储到磁盘上。以下是一个示例控制器方法：

@PostMapping(value = "/upload")
public ResponseEntity<?> uploadImage(@ModelAttribute ImageModel model) {
    try {
        // 获取上传的图像文件
        MultipartFile imageFile = model.getImageFile();

        // 获取文件名称
        String imageName = imageFile.getOriginalFilename();

        // 存储文件到磁盘上，这里使用了 BufferedImage
        BufferedImage bufferedImage = ImageIO.read(imageFile.getInputStream());
        File outputfile = new File("<path-to-file>" + imageName);
        ImageIO.write(bufferedImage, "jpg", outputfile);

        // 处理其他属性
        String name = model.getName();

        return ResponseEntity.ok().build();
    } catch (Exception e) {
        return ResponseEntity.badRequest().build();
    }
}

3. 在前端应用程序中，您需要使用 JavaScript 和 FormData 对象来上传图像文件和其他表单字段。以下是一个示例上传函数：

function uploadImage() {
    var fileInput = document.getElementById("imageFileInput");
    var nameInput = document.getElementById("nameInput");

    var formData = new FormData();
    formData.append("imageFile", fileInput.files[0]);
    formData.append("name", nameInput.value);

    fetch("/upload", {
        method: "POST",
        body: formData
    }).then(function () {
        console.log("上传成功！");
    }).catch(function () {
        console.error("无法上传图像。");
    });
}

请注意，示例中的前端代码是基于 fetch API 和原生 JavaScript 编写的，但您也可以