Bagaimanakah Saya Boleh Muat Naik Fail Menggunakan API Ambil JavaScript?

Memuat Naik Fail Menggunakan JS Fetch API: Membongkar Rahsia

Memahami cara memuat naik fail dengan JS fetch API boleh menjadi tugas yang sukar. Untuk menjelaskan konsep ini, kami akan membahagikan cara menghantar fail untuk dimuat naik apabila merakam acara serah.

Pertama sekali, ingat bahawa teg input membolehkan kami memilih fail (atau berbilang) menggunakan input fail kaedah. Untuk menangkap acara serahan, anda perlu menyatakan pengendali acara yang sesuai dalam kod anda.

Kini tiba bahagian penting: menghantar fail menggunakan pengambilan. Sintaks untuk ini ialah:

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

Untuk berjaya menghantar fail, kita perlu mengisi harta badan dengan data fail dan menetapkan pengepala Jenis Kandungan yang betul. Berikut ialah coretan kod dipertingkat yang menunjukkan cara untuk melakukan ini:

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

Dalam kod ini, FormData digunakan untuk mencipta objek data borang baharu dan data fail dilampirkan menggunakan kaedah tambah. Pengepala Jenis Kandungan ditetapkan secara automatik kepada berbilang bahagian/data-bentuk, yang diperlukan untuk permintaan muat naik fail.

Dengan adanya ini, kod anda boleh memuat naik fail ke pelayan dengan mudah menggunakan API pengambilan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Muat Naik Fail Menggunakan API Ambil JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!