同じマルチパートでファイルとjsonを送信しようとしていますPOSTエンドポイントへのリクエストREST=エンドポイント。リクエストはaxiosライブラリを使用してJavaScriptから直接行われます。以下のメソッドに示されています。
doAjaxPost() {
var formData = new FormData();
var file = document.querySelector('#file');
formData.append("file", file.files[0]);
formData.append("document", documentJson);
axios({
method: 'post',
url: 'http://192.168.1.69:8080/api/files',
data: formData,
})
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
}
ただし、問題はchrome [ネットワーク]タブの開発者ツールでリクエストを検査するとき、document
のContent-Type
フィールドが見つからない一方で、file
フィールドContent-Type
はapplication/pdf
です(pdfファイルを送信しています)。
サーバーでは、Content-Type
for document
はtext/plain;charset=us-ascii
です。
更新:
document
を.json
ファイルとして送信することにより、Postmanを介して正しいリクエストを行うことができました。これはLinux/Macでのみ機能することがわかりました。
コンテンツタイプを設定するには、ファイルのようなオブジェクトを渡す必要があります。 Blob
を使用して作成できます。
const obj = {
hello: "world"
};
const json = JSON.stringify(obj);
const blob = new Blob([json], {
type: 'application/json'
});
const data = new FormData();
data.append("document", blob);
axios({
method: 'post',
url: '/sample',
data: data,
})
リクエストに正しいヘッダーを追加するだけです
axios({
method: 'post',
url: 'http://192.168.1.69:8080/api/files',
data: formData,
header: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data',
},
})