我们希望将一个图像文件作为多部分/表单发送到后端,我们try 使用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 (
        <form encType="multipart/form-data" action="">
          <input type="file" name="fileName" defaultValue="fileName"></input>
          <input type="button" value="upload" onClick={this.uploadAction.bind(this)}></input>
        </form>
    )
  }
}

后端中的错误为"nested exception is org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found".

在读取this之后,我们try 在fetch中将边界设置为headers:

fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data; boundary=AaB03x" +
        "--AaB03x" +
        "Content-Disposition: file" +
        "Content-Type: png" +
        "Content-Transfer-Encoding: binary" +
        "...data... " +
        "--AaB03x--",
        "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!");
    });
  }

这一次,后端的错误是:Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause

我们添加多部分边界对吗?它应该在哪里?

推荐答案

我们只是试图删除我们的标题,它的工作!

fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });

Reactjs相关问答推荐

MUImaterial -ui-如何将文本字段和 Select 分组?

react 派生状态未正确更新

TypeError:b不是React.js中的函数错误

如何在单击行中的图标时避免选中ionic 复选框?

React中的useEffect钩子

在每页上应用字体-NextJS

如何修复ReferenceError:在构建过程中未定义导航器

PWA:注册事件侦听器不会被触发

组件安装后调用自定义钩子

i18next中复数键的理解

React 应用程序可以嵌入到 PowerPoint 中吗?

使用 nextjs App Router 在动态客户端进行服务器端渲染

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

FlatList 不在 React Native 中呈现项目

如何通过 id 从 useSprings 数组中删除元素

下一次导出:未捕获的语法错误:标识符注册表已被声明

刷新页面时状态改变问题

从 API 中提取映射数组后出现重复元素

如何使用 useEffect 和 if 语句 React

为什么我在运行一些 npm react 命令时会收到这些警告?