(ReactJS,Axios)將檔案發布到API會導致HTTP請求沒有負載-有解無憂

我已經為這個問題苦苦掙扎了幾個小時，因為我覺得我瀏覽了所有 StackOverflow，因此在 IT 作業近十年后，我在這里發表了我的第一篇文章！??

長話短說，我必須將檔案（影像）發送到我的 API（Express 4/Multer），為此我正在使用 Axios。下面是表單提交部分目前的樣子：

let avatar = e.target.avatar.files[0];
[...]
if (avatar) {
    let formData = new FormData();
    formData.append("avatar", avatar);
    let customHeaders = {
        
        "Content-Type":
            "multipart/form-data"   ";boundary=xxMyBoundaryxx",
    };
    console.log(avatar); // This is not empty !
    console.log(formData.get('avatar')); // Neither is this !
    axios.post(
        apiUrl,
        formData,
        customHeaders
    );
}

服務器端的一切都很好，我使用 Insomnia 來測驗將檔案上傳到我的 apiUrl，它的作業就像一個魅力。此外，如果我洗掉 Content-Type 中的邊界引數，它會觸發錯誤（'Multipart: Boundary not found'）。

但是，當我使用上面的代碼發布檔案時，生成的 HTTP 請求沒有有效負載，這意味著提供給我的 API 的資料是空的（使用 Chrome 檢查）。

我一直在試圖理解這個問題，希望我的描述不是太模糊，我的英語也不是太差??

如果您遺漏了什么可以回答，請隨時與我聯系，

問候，
哈茲瑞斯

PS：服務器端“Multipart：未找到邊界”錯誤訊息：

Error: Multipart: Boundary not found
    at new Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:58:11)
    at Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:26:12)
    at Busboy.parseHeaders (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:71:22)
    at new Busboy (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:22:10)
    at multerMiddleware (C:\Workspace\React\Tricks\back\node_modules\multer\lib\make-middleware.js:33:16)
    at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
    at C:\Workspace\React\Tricks\back\node_modules\express\lib\router\index.js:281:22

uj5u.com熱心網友回復：

content-type如果您使用本機 FormData 編碼器，則用戶不應定義表單邊界部分和整個標題。

使用 Axios v0.27.2：

 const formData = new FormData();
 formData.append('avatar', avatar);

 axios.post(apiUrl, formData);

或者：

 axios.postForm(apiUrl, {
   avatar
 });

或者您可以只提交整個 FileList 物件

 axios.post(apiUrl, document.querySelector('#fileInput').files);

操場

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481688.html

標籤：反应表示上传文件 axios 穆尔特

上一篇：djangorest上傳多張圖片

下一篇：網路選項卡中的CORS錯誤和密鑰