【Javascript/Typescript】fetch APIでmultipart/form-dataを送信したい(備忘録)

結論

Content-Typeに値を設定しない & FormDataオブジェクトをbodyにセット
FormDataオブジェクトをbodyにセットすれば、fetch APIが予期に計らって、HTTPリクエストを作ってくれるようです。

サンプルコード

※ TSで書いてるので型まわりのコードも含まれています。

type contentProps = {
	title: string,
	description: string,
	image: Blob | null
}

const CreateContent = async (props: contentProps) => {

	const headers = new Headers({
      // 略
	})

	const body = new FormData()
	body.append("title", props.title)
	body.append("description", props.description)
	if (props.image != null) {
		body.append("image", props.image, 'image.jpg')
	}

	const data: RequestInit = {
		method: 'POST',
		headers: headers,
		body: body
	}

	const response = await fetch('http://localhost:8080/contents', data)
	.then((response) => {return (response.json()).then((data) => {return data})}).catch((error) => {
		console.log(error)
	})
	return response
}

備考:NGだったパターン

• Content-Typeにmultipart/form-dataをセット。
• Content-Typeにmultipart/form-data; boundary=-------------------[ランダム半角英数列]
• bodyからContent-Typeを削除する(StackOverflow)

2つ目bodyのセットの仕方によってはうまくいくかもしれない。
3つめのContent-Type削除はおそらく特殊ケース。

参考

どんぴしゃだったStackOverflowの質問

FormData#append (MDN)