Bagaimana untuk Menghantar Fail ke Pelayan Menggunakan API Ambil JavaScript?

Cara Memuat Naik Fail Menggunakan API JS Fetch

Memuat naik fail melalui API pengambilan ialah teknik yang berharga untuk menghantar data daripada aplikasi web ke pelayan. Sebagai pembangun, adalah penting untuk memahami proses untuk mengendalikan muat naik fail dengan berkesan.

Pertimbangkan senario di mana anda mempunyai medan input yang membolehkan pengguna memilih fail:

<input type="file">

Setelah penyerahan daripada borang yang mengandungi input fail, anda perlu menggunakan fetch() untuk menghantar fail ke pelayan. Walau bagaimanapun, tugas ini memerlukan perhatian yang teliti terhadap struktur badan permintaan.

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

Untuk membina kandungan permintaan, kami memanfaatkan antara muka FormData. Antara muka ini membolehkan penciptaan koleksi pasangan nilai kunci yang boleh termasuk objek fail.

const formData = new FormData();
formData.append('file', input.files[0]);

Dalam kod di atas, kami menambahkan fail yang dipilih pada objek FormData menggunakan kaedah tambah. Argumen pertama mewakili kunci, manakala argumen kedua ialah objek fail yang diambil daripada input fail.

Selain itu, anda boleh memasukkan pasangan nilai kunci lain dalam objek FormData jika perlu. Sebagai contoh, anda boleh menambah data pengguna:

formData.append('user', 'hubot');

Dengan objek FormData sedia, akhirnya kami boleh membina permintaan pengambilan seperti berikut:

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

Permintaan ini akan menghantar fail yang dipilih dan sebarang data tambahan dalam objek FormData ke titik akhir '/avatars' pada pelayan. Pelayan kemudiannya boleh memproses fail seperti yang diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Fail ke Pelayan Menggunakan API Ambil JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!