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