使用 Axios 将文件从 React 上传到 API CXF 2.5 java答案

【问题标题】：Upload file from react using Axios to API CXF 2.5 java使用 Axios 将文件从 React 上传到 API CXF 2.5 java
【发布时间】：2020-10-28 15:21:58
【问题描述】：

我正在尝试从表单上传文件以及一些数据，以响应服务器 CXF java。

在反应代码中，我使用 FormData，一个带有 multipart/form-data 标头的简单 axios.post。在 java 中，我告诉 web 服务消费 multipart/form-data。

对于我要添加到 formData 的文本值，我使用 Blob 类，以便一切都相同，文件和文本值。

在 web 服务 java 中，我有一个 MultivaluedMap<String, String> 作为参数，并且只有文本值，我有我的数据。如果我在 axios 发布请求中添加文件，我有一个错误 500 并且服务器没有记录任何事件，我认为它在与 MultivaluedMap<String, String> 的映射中崩溃。

然后我尝试使用MultivaluedMap<Object, Object>，但问题是一样的。

如果我按预期只使用字符串作为参数，我只有来自 axios 发布请求的数据中的第一个条目，它只是值而不是键。

我想知道我是否在反应方面做了坏事，但我对 CXF 不熟悉，所以可能是我在 java 方面的做法不好。

    @POST
    @Consumes("multipart/form-data")
    public void createInfoCollection(MultivaluedMap<Object, Object> formData) {
        
        try {
            System.out.println("json incoming");
            System.out.println(formData);   
        } catch(Exception e) {
            System.out.println("Exception = " + e);
        }
    }

反应代码很简单，如下：

        const formData = new FormData();

        if (this.state.selectedFile) {
            // Update the formData object 
            formData.append(
                "selectedFile",
                this.state.selectedFile,
                this.state.selectedFile.name
            );
        }

        Object.keys(this.state).map(key => {
            if (key != 'selectedFile') {
                let value = this.state[key];
                const json = JSON.stringify(value);
                const blob = new Blob([json], {
                    type: 'application/json'
                });
                formData.append(key, blob, key);
                // formData.append(key, this.state[key]);
            }
        });

        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        }
        axios.post("My/Url/That/Works/Well/With/GetRequests", formData, config)
            .catch(error => {
                console.log(error);
            });

谢谢

编辑我在 java 端发现了 MultipartBody，但我仍在学习如何使用它

【问题讨论】：

标签： java reactjs axios cxf multipartform-data

【解决方案1】：

好的，我找到了使用MultipartBody formDat的解决方案

如果Content-Type 是application/octet-stream，则在此对象中有标题Content-Disposition 具有属性名称name 和属性filename。

如果文件旁边有其他数据，则它没有任何content-type，但获取名称的方式与解析name后的属性name相同。

然后在MultipartBody 和attachment.getDataHandler().getInputStream() 上有附件，我有文件的内容以及其他数据的基本值（如果有）。

标题和附件之间的匹配，我猜我可以做任何我需要做的事情。

感谢 StackOverFlow 给了我新的灵感！

【讨论】：