[英]Upload file from react using Axios to API CXF 2.5 java
I'm trying to upload a file along some data from a form in react to a server CXF java.我正在尝试沿着表单中的一些数据上传文件,以响应服务器 CXF java。
In the react code, i use FormData, a simple axios.post with multipart/form-data
headers.在反应代码中,我使用 FormData,一个简单的 axios.post 带有
multipart/form-data
标头。 In java i tell the webservice to consumme multipart/form-data.在 java 中,我告诉 web 服务使用 multipart/form-data。
for the text values i want to add to the formData i use the class Blob so that everything is the same, file and text values.对于我想添加到 formData 的文本值,我使用 class Blob,以便一切都相同,文件和文本值。
In the webservice java i have as param a MultivaluedMap<String, String>
and with only text values, i have my data.在网络服务 java 中,我有一个 MultivaluedMap
MultivaluedMap<String, String>
作为参数,并且只有文本值,我有我的数据。 If i add the file in the axios post request, i have an error 500 and the server doesnt event log anything, it crashes i think in the mapping with the MultivaluedMap<String, String>
.如果我在 axios 发布请求中添加文件,我有一个错误 500 并且服务器没有记录任何事件,我认为它在与
MultivaluedMap<String, String>
的映射中崩溃。
I've tried then to use MultivaluedMap<Object, Object>
but the problem was the same.然后我尝试使用
MultivaluedMap<Object, Object>
但问题是一样的。
If i use only String as param as expected, i only have the first entry in the data from axios post request and it's the value only not the key.如果我按预期只使用字符串作为参数,我只有来自 axios 发布请求的数据中的第一个条目,它只是值而不是键。
I wonder if i do something bad on react side but i'm not familiar with CXF so maybe it's my approch on the java side that is bad.我想知道我是否在反应方面做了坏事,但我对 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);
}
}
on react the code is simple and goes as:反应代码很简单,如下所示:
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);
});
Thank you谢谢
EDIT i found out about MultipartBody
on the java side but i'm still learning how to use this yet编辑我在 java 方面发现了
MultipartBody
但我仍在学习如何使用它
Ok i found a solution using MultipartBody formDat
好的,我找到了使用
MultipartBody formDat
的解决方案
in this object there are headers Content-Disposition
that has a property names name
and a property filename
if the Content-Type
is application/octet-stream
.在此 object 中,如果
Content-Type
为application/octet-stream
,则标题Content-Disposition
具有属性名称name
和属性filename
。
If there are other data next to a file it doesnt have any content-type
but the way to get the name is the same with the property name
after parsing the Content-Disposition
.如果文件旁边有其他数据,则它没有任何
content-type
,但获取名称的方式与解析Content-Disposition
后的属性name
相同。
Then there are Attachments on the MultipartBody
and with attachment.getDataHandler().getInputStream()
i have the content of the file and also the basic values of other data if there are any.然后在
MultipartBody
上有附件,并且使用attachment.getDataHandler().getInputStream()
我有文件的内容以及其他数据的基本值(如果有的话)。
with a match between headers and attachments, i'm guessing i can do whatever i need to do.通过标题和附件之间的匹配,我猜我可以做任何我需要做的事情。
Thank you for giving me new inspiration StackOverFlow !感谢 StackOverFlow 给了我新的灵感!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.