Bagaimanakah Saya Boleh Menguasai Muat Naik Fail Menggunakan API Ambil JavaScript?

Menguasai Muat Naik Fail dengan JS fetch API

Menavigasi JS fetch API boleh menjadi sukar, terutamanya apabila menangani muat naik fail. Mari permudahkan proses ini dengan membahagikannya langkah demi langkah.

1. Tangkap Input Fail

Seperti yang ditunjukkan dalam kod anda, gunakan elemen input fail untuk membolehkan pengguna memilih fail:

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

2. Mengendalikan Acara Serah

Tangkap acara serah (gantikan pemegang tempat dengan pengendali acara pilihan anda):

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3. Bina Badan Permintaan

Untuk menghantar fail menggunakan fetch, gunakan API FormData. Ia mencipta badan permintaan data berbilang bahagian/bentuk. Tambahkan fail yang dipilih (input.files[0]) dan sebarang data tambahan, seperti maklumat pengguna, pada objek formData:

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

4. Mulakan Permintaan ambil

Dengan kandungan permintaan sedia, hantar permintaan POST menggunakan pengambilan, nyatakan URL titik akhir ('/files') dan sediakan objek formData sebagai badan:

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

Dan voila! Anda kini mempunyai mekanisme muat naik fail berfungsi sepenuhnya menggunakan API pengambilan JS.

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