やりたいこと

multipart/form-dataでファイルを送信する際は、FormDataオブジェクトを作ってそれをそのまま送信する。
FormDataオブジェクトを作成するには<form>タグを引数に取ってFormDataを初期化しても良いし、
空のFormDataオブジェクトを作ってそこにデータを足しても良いみたい。
(下記は空のFormDataの例)

// フォームにファイルを指定
let formData = new FormData();
formData.set("uploadFile", file, file.name);

// 送信
let xhr = new XMLHttpRequest();
xhr.open("PUT", "/your/api/url/");
xhr.send(formData);

ただ、こうすると送信時のfileのContent-Typeがブラウザで判定されたMIMEタイプで送信されてしまう。
これを明示的に指定したい。

対策

ファイルをtype指定付きでBlobに変換することで、multipart/form-data送信時のContent-Typeも指定した値になる。

let blob = new Blob([file], {type: "application/zip"});

// フォームにblobを指定
let formData = new FormData();
formData.set("uploadFile", blob, file.name);

これはファイルの場合ですが、textや他のデータでもBlobに変換すればContent-Typeを指定できるはず。
(記事末尾の参考記事も参考にしてみてください。)

サンプルコード

upload.html

<!DOCTYPE html>
<html>
<head>
<title>ファイルアップロードテスト</title>
</head>
<body>
<input type="file" onchange="fileChanged(this)"/>
<button id="button">send</button>
<script>
const button = document.getElementById("button");

let file;

// 送信ボタンクリック時
button.onclick = function() {

  let blob = new Blob([file], {type: "application/zip"});

  // フォームにblobを指定
  let formData = new FormData();
  formData.set("uploadFile", blob, file.name);

  // 送信
  let xhr = new XMLHttpRequest();
  xhr.open("PUT", "/your/api/url/");
  xhr.send(formData);
  xhr.onerror = function(e) {
    console.log("ERROR");
    console.log(e);
  }
  xhr.onload = function(e) {
    console.log("LOAD");
    console.log(e);
    console.log(xhr.status);
    console.log(xhr.statusText);
    console.log(xhr.responseText);
    alert(xhr.responseText);
  }
}

// ファイル選択時
function fileChanged(input) {
  file = input.files[0];
  console.log(file);
  console.log(file.name);
}
</script>
</body>
</html>

multipart/form-dataで個々のデータに対してContent-Typeを指定する。

やりたいこと

対策

サンプルコード

参考記事