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

Question

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

在反应代码中，我使用 FormData，一个简单的 axios.post 和 multipart/form-data headers。在 java 中，我告诉网络服务使用 multipart/form-data.

对于我想添加到 formData 中的文本值，我使用 class Blob，这样一切都是一样的，文件和文本值。

在网络服务 java 中，我有参数 a MultivaluedMap<String, String> 并且只有文本值，我有我的数据。如果我在 axios post 请求中添加文件，我有一个错误 500 并且服务器没有记录任何事件，我认为它在与 MultivaluedMap<String, String>.

的映射中崩溃

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

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

我想知道我是否在 React 方面做了一些不好的事情，但我不熟悉 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 但我仍在学习如何使用它

Answer 1

好的，我找到了使用 MultipartBody formDat

的解决方案

在这个 object 中有 headers Content-Disposition 有一个属性名字 name 和一个属性 filename如果 Content-Type 是 application/octet-stream.

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

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

通过 headers 和附件之间的匹配，我想我可以做任何我需要做的事情。

感谢 Whosebug 给我新的灵感！

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

Upload file from react using Axios to API CXF 2.5 java

java

cxf

multipartform-data

reactjs

axios