React.js、サーバーにマルチパート/フォームデータを送信する方法

Question

イメージファイルをマルチパート/フォームとしてバックエンドに送信する場合、htmlフォームを使用してファイルを取得し、formDataとしてファイルを送信しようとします。 org.apache：;ネストされた例外はあるにjava.io.IOExceptionマルチパートサーブレット要求を解析できませんでした：コード

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ですです。 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（）サーブレットの【のDispatcherServlet】経路に関連して[]が例外を投げた[リクエスト処理に失敗しました。ネストされた例外は根本的な原因でjava.lang.NullPointerExceptionです

マルチパート境界を正しく追加しますか？それはどこにあるべきですか？ マルチパート/フォームデータを取得していないため、最初は間違っているかもしれません。どうすればそれを正しく取得できますか？

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を送信する場合は、boundaryとContent-Typeが自動的に割り当てられるため、contentTypeは避けてください。

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