☰

JS フェッチ API でファイルをアップロードするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript fetch-api
JS フェッチ API でファイルをアップロードするにはどうすればいいですか? 質問する

私はまだそれを理解しようとしているところです。

ファイル入力を使用して、ユーザーにファイル（または複数）を選択させることができます。

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

submitそして、を使用してイベントをキャッチできます<fill in your event handler here>。 しかし、キャッチしたら、 を使用してファイルを送信するにはどうすればよいですかfetch?

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

ベストアンサー1

私は次のようにしました:

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

おすすめ記事