加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – React.js,如何将multipart/form-data发送到服务器

发布时间:2020-12-15 20:54:20 所属栏目:百科 来源:网络整理
导读:我们想将一个图像文件作为multipart / form发送到后端,我们尝试使用html表单获取文件并将文件作为formData发送,这里是代码 export default class Task extends React.Component { uploadAction() { var data = new FormData(); var imagedata = document.que
我们想将一个图像文件作为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 (
        <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>
    )
  }
}

后端的错误是“嵌套异常是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!");
    });
  }

这次,后端的错误是:servlet [dispatcherServlet]的Servlet.service()在上下文中,路径[]引发异常[请求处理失败;具有根本原因的嵌套异常是java.lang.NullPointerException]

我们添加多部分边界吗?应该在哪里?
也许我们一开始就错了,因为我们没有得到multipart / form-data.我们怎样才能正确理解?

我们只是尝试删除我们的标题,它的工作原理!
fetch("http://localhost:8910/taskCreationController/createStoryTask",function (e) {
      alert("Error submitting form!");
    });

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读