时间戳

首页 > 解决方案 > 使用 Axios 将文件从 React 上传到 API CXF 2.5 java

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

问题描述

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

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

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

在 web 服务 java 中，我有作为参数 aMultivaluedMap<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);
            });

谢谢

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

标签： javareactjsaxioscxfmultipartform-data

解决方案

好的，我找到了一个解决方案MultipartBody formDat

在这个对象中Content-Disposition，有一个具有属性名称的标题name和一个属性（filename如果Content-Type是）application/octet-stream。

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

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

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

感谢 StackOverFlow 给了我新的灵感！

推荐阅读