如何将 JSON 和图像文件发送到服务器？答案

【问题标题】：How to send a JSON and an image file to a server?如何将 JSON 和图像文件发送到服务器？
【发布时间】：2020-10-05 17:03:12
【问题描述】：

我正在尝试将 JSON 文件和图像文件一起发送到服务器，但我真的很挣扎。

1) 如果我只发送被子项目，那么跳过 formData 并将下面的 $http 部分更改为 $http.post('quilts/create/', quilt)，然后将服务器端点设置为期望 (@ RequestBody QuiltRequest quiltRequest) 没有关于 transformRequest 和 headers 的信息，它可以非常愉快地处理其中的数据，但我没有要添加到记录中的图像。

2）如果我不将被子项添加到formData，并告诉服务器期望（@RequestParam（“image”）MultipartFile图像），我可以将图像文件保存在我的服务器上并生成一个url字符串为它，但没有其他被子信息来制作相应的数据库条目。

如何在一个请求中同时发送被子和图像，并让服务器同时接收和处理？

非常感谢！

客户端服务：

this.create = function (quilt, image) {
        quilt.size = JSON.parse(quilt.size);
        quilt.maker = JSON.parse(quilt.maker);
        const formData = new FormData();
        formData.append('quiltRequest', quilt);
        formData.append('image', image);
        $http.post('quilts/create/', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function (response) {
            return window.location = '#!/quilts/created/' + response.data;
        })
    };

服务器端端点：

    @PostMapping(path = "/create")
    public BigInteger create(@RequestPart QuiltRequest quiltRequest, @RequestPart MultipartFile image) throws IOException {
        // do stuff based on parameters received
    }

【问题讨论】：

标签： angularjs spring server

【解决方案1】：

除此之外，我认为您可以尝试将图像编码为 base64 字符串。将其发送到服务器并在服务器上，您对其进行解码

【讨论】：

【解决方案2】：

我需要的解决方案由现实世界的英雄提供，并在此处发布，以防其他有类似问题的人偶然发现此线程:)（但感谢 user3562932 花一些时间阅读并提出建议） .

在客户端，我们将五行数据准备移到了一个单独的方法中，这样原来的 create() 现在需要一堆参数并直接跳转到 $http.post(url, data它已被神奇地转化为适合发送的东西 {关于如何发送数据的规则}）。

        $http.post('quilts/create/', formData(quilt, image), {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function (response) {
            return window.location = '#!/quilts/created/' + response.data;
        })

神奇的转换发生在新函数 formData() 中，它将我们要发送的数据作为其参数并进行必要的更改：
1) 为要发布的数据创建一个 formData 容器。
2) 将 html 表单中的信息（例如文本、数字）字符串化为 JSON 并附加到 formData。
2a）在这种特殊情况下，我的被子结构包含从后端作为 JSON 到达的尺寸和制造商详细信息，并在网页中从各种尺寸和制造商的下拉列表中选择，因此解析行以准备这些项目包含在 formData 中。
3) 将文件转换为 BLOB，然后同样追加。
4) 返回 formData，所有必需的信息都整齐地包装好，准备好了！
注意：在 services.js 文件中，这个 formData() 方法实际上出现在 create() 方法之上，但这样说起来更合乎逻辑。

function formData(quilt, image) {
        let formData = new FormData();
        quilt.size = JSON.parse(quilt.size);
        quilt.maker = JSON.parse(quilt.maker);
        formData.append('quiltRequest', JSON.stringify(quilt));
        formData.append('image', new Blob([image]));
        return formData;
    }

在服务器端，我们现在可以愉快地通过以下方式接收：

    @PostMapping(path = "/create", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public BigInteger create(@RequestParam(value = "quiltRequest") String quiltRequest,
                             @RequestParam(value = "image") MultipartFile image) throws IOException {
        QuiltRequest quilt = new ObjectMapper().readValue(quiltRequest, QuiltRequest.class);
        QuiltResponse quiltResponse = quiltService.create(quilt, image);
        return quiltResponse.getQuilt().getId();
    }

为了使端点能够使用我们令人兴奋的多媒体输入，我们必须在类的顶部添加以下导入：

import org.springframework.http.MediaType;

我们使用另一个导入来启用我们为传入图像文件指定的 MultipartFile 类：

import org.springframework.web.multipart.MultipartFile;

来自网页的 JSON 对象以字符串的形式出现，但需要将其解析为其底层组件才能真正使用。这就是 ObjectMapper 发挥作用的地方。调用它的 readValue() 方法，并传入字符串参数以及解包时信息应该是什么样子的模板（这里是一个 QuiltRequest 类，其定义的属性对应于我们在客户端返回到 JSON 的信息服务器）。请记住包含访问 ObjectMapper 所需的导入：

import com.fasterxml.jackson.databind.ObjectMapper;

希望这种对更改的分解是有意义的，并有足够的解释来帮助其他开发人员构建端到端的 POST 请求以适应他们自己的项目。

【讨论】：