React.js，如何在多/表单数据发送到服务器

Question

我们要发送图像文件作为多/表单到后台，我们尝试使用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("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（）进行的servlet [DispatcherServlet的]与路径上下文[]抛出异常[请求处理失败;嵌套的异常是根本原因的java.lang.NullPointerException]

我们是否添加多部分边界？它应该在哪里？ 也许我们都错了，首先是因为我们没有得到的multipart/form-data的。我们怎样才能正确地得到它？

Answer 1

我们只能尽力消除我们的头和它的作品！

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!"); 
    }); 

Answer 2

对于发送multipart/formdata，您需要避免contentType，因为浏览器会自动分配boundary和Content-Type。

在你的情况下，通过使用fetch，即使你避免Content-Type它设置为默认text/plain。所以试试jQuery ajax。如果我们将其设置为false，则会删除contentType。

这是工作的代码

var data = new FormData(); 
var imagedata = document.querySelector('input[type="file"]').files[0]; 
data.append("data", imagedata); 
$.ajax({ 
    method: "POST", 
    url: fullUrl, 
    data: data, 
    dataType: 'json', 
    cache: false, 
    processData: false, 
    contentType: false 
}).done((data) => { 
    //resolve(data); 
}).fail((err) => { 
    //console.log("errorrr for file upload", err); 
    //reject(err); 
});