Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Muat Naik Fail ke Pelayan Menggunakan API Ambil JavaScript?

Bagaimanakah Saya Boleh Muat Naik Fail ke Pelayan Menggunakan API Ambil JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-11-29 05:34:13656semak imbas

How Can I Upload Files to a Server Using the JavaScript Fetch API?

Memuat Naik Fail dengan JS Fetch API

Memuat naik fail menggunakan JS fetch API boleh membingungkan pada mulanya. Selepas memilih fail menggunakan input fail, langkah seterusnya ialah menyepadukan kaedah fetch() untuk menghantar fail ke pelayan.

Untuk menggunakan API fetch untuk memuat naik fail, anda perlu untuk membina objek FormData. Objek ini merangkum kedua-dua data fail dan sebarang data borang tambahan yang anda ingin sertakan.

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data

Selain fail, anda boleh menambah data lain pada borang menggunakan append(), seperti yang ditunjukkan dalam kod di bawah:

data.append('user', 'hubot'); // Append additional form data

Kini, anda boleh menggunakan kaedah fetch() untuk membuat permintaan POST ke titik akhir pelayan anda, menghantar data borang sebagai permintaan body:

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});

Pendekatan ini membolehkan anda menghantar fail dan data lain dengan mudah menggunakan ciri sofistikated API pengambilan.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn