react上传本地文件到服务器,reactjs – React.js,如何将multipart/form-data发送到服务器...

最新推荐文章于 2025-06-07 09:21:02 发布

weixin_39639514

最新推荐文章于 2025-06-07 09:21:02 发布

阅读量1.3k

点赞数

文章标签： react上传本地文件到服务器

在尝试从React应用中通过fetch API发送multipart/form-data的图片文件到后端时遇到问题。后端返回了MultipartException和IOException，提示找不到多部分边界。在尝试手动设置Content-Type头并指定边界后，后端错误变为NullPointerException。问题可能在于请求格式的不正确设置或后端处理的错误。解决方案可能包括正确设置formData和Content-Type，以及检查后端的多部分解析配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们想将一个图像文件作为multipart / form发送到后端,我们尝试使用html表单获取文件并将文件作为formData发送,这里是代码

export default class Task extends React.Component {

uploadAction() {

var data = new FormData();

var imagedata = document.querySelector('input[type="file"]').files[0];

data.append("data",imagedata);

fetch("http://localhost:8910/taskCreationController/createStoryTask",{

mode: 'no-cors',method: "POST",headers: {

"Content-Type": "multipart/form-data"

"Accept": "application/json","type": "formData"

},body: data

}).then(function (res) {

if (res.ok) {

alert("Perfect! ");

} else if (res.status == 401) {

alert("Oops! ");

}

},function (e) {

alert("Error submitting form!");

});

}

render() {

return (

)

}

后端的错误是“嵌套异常是org.springframework.web.multipart.MultipartException：无法解析多部分servlet请求;嵌套异常是java.io.IOException：org.apache.tomcat.util.http.fileupload.FileUploadException：请求被拒绝,因为没有找到多部分边界“.

阅读this之后,我们尝试在fetch中设置边框到标题：

fetch("http://localhost:8910/taskCreationController/createStoryTask",headers: {

"Content-Type": "multipart/form-data; boundary=AaB03x" +

"--AaB03x" +

"Content-Disposition: file" +

"Content-Type: png" +

"Content-Transfer-Encoding: binary" +

"...data... " +

"--AaB03x--","Accept": "application/json",function (e) {

alert("Error submitting form!");

});

}