Bagaimana cara mengunggah file dengan API ambil JS?

Saya masih mencoba untuk membungkus kepala saya di sekitarnya.

Saya dapat meminta pengguna memilih file (atau bahkan banyak) dengan input file:

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

Dan saya bisa menangkap submitacara menggunakan <fill in your event handler here>. Tapi begitu saya lakukan, bagaimana cara mengirim file menggunakan fetch?

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

Ini adalah contoh dasar dengan komentar. The uploadFungsi adalah apa yang Anda cari:

// Select your input type file and store it in a variable
const input = document.getElementById('fileinput');

// This will upload the file after having read it
const upload = (file) => {
  fetch('http://www.example.net', { // Your POST endpoint
    method: 'POST',
    headers: {
      // Content-Type may need to be completely **omitted**
      // or you may need something
      "Content-Type": "You will perhaps need to define a content-type here"
    },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );
};

// Event handler executed when a file is selected
const onSelectFile = () => upload(input.files[0]);

// Add a listener on your input
// It will be triggered when a file will be selected
input.addEventListener('change', onSelectFile, false);

Saya sudah melakukannya seperti 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
})

Catatan penting untuk mengirim File dengan Ambil API

Orang harus menghilangkan content-typetajuk untuk permintaan Ambil. Kemudian browser akan secara otomatis menambahkan Content typeheader termasuk Form Boundary yang terlihat seperti

Content-Type: multipart/form-data; boundary=—-WebKitFormBoundaryfgtsKTYLsT7PNUVD

Batas bentuk adalah pembatas untuk formulir data

Jika Anda ingin banyak file, Anda dapat menggunakan ini

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

var data = new FormData()
for (const file of input.files) {
  data.append('files',file,file.name)
}

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

Untuk mengirimkan file tunggal, Anda hanya dapat menggunakan Fileobjek dari input's .filesarray yang langsung sebagai nilai body:di Anda fetch()initializer:

const myInput = document.getElementById('my-input');

// Later, perhaps in a form 'submit' handler or the input's 'change' handler:
fetch('https://example.com/some_endpoint', {
  method: 'POST',
  body: myInput.files[0],
});

Ini berfungsi karena Filemewarisi dari Blob, dan Blobmerupakan salah satu BodyInitjenis yang diizinkan yang didefinisikan dalam Standar Ambil.

Jawaban yang diterima di sini sedikit tertanggal. Pada April 2020, pendekatan yang disarankan terlihat di situs web MDN menyarankan penggunaan FormDatadan juga tidak meminta untuk mengatur jenis konten. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Saya mengutip cuplikan kode untuk kenyamanan:

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then((response) => response.json())
.then((result) => {
  console.log('Success:', result);
})
.catch((error) => {
  console.error('Error:', error);
});

Melompat dari pendekatan Alex Montoya untuk beberapa elemen input file

const inputFiles = document.querySelectorAll('input[type="file"]');
const formData = new FormData();

for (const file of inputFiles) {
    formData.append(file.name, file.files[0]);
}

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

Masalahnya bagi saya adalah bahwa saya menggunakan response.blob () untuk mengisi formulir data. Tampaknya Anda tidak bisa melakukan itu setidaknya dengan reaksi asli jadi saya akhirnya menggunakan

data.append('fileData', {
  uri : pickerResponse.uri,
  type: pickerResponse.type,
  name: pickerResponse.fileName
 });

Ambil tampaknya mengenali format itu dan mengirim file ke mana uri menunjuk.

Ini kode saya:

html:

const upload = (file) => {
    console.log(file);

    

    fetch('http://localhost:8080/files/uploadFile', { 
    method: 'POST',
    // headers: {
    //   //"Content-Disposition": "attachment; name='file'; filename='xml2.txt'",
    //   "Content-Type": "multipart/form-data; boundary=BbC04y " //"multipart/mixed;boundary=gc0p4Jq0M2Yt08jU534c0p" //  ή // multipart/form-data 
    // },
    body: file // This is your file object
  }).then(
    response => response.json() // if the response is a JSON object
  ).then(
    success => console.log(success) // Handle the success response object
  ).catch(
    error => console.log(error) // Handle the error response object
  );

  //cvForm.submit();
};

const onSelectFile = () => upload(uploadCvInput.files[0]);

uploadCvInput.addEventListener('change', onSelectFile, false);

<form id="cv_form" style="display: none;"
										enctype="multipart/form-data">
										<input id="uploadCV" type="file" name="file"/>
										<button type="submit" id="upload_btn">upload</button>
</form>
<ul class="dropdown-menu">
<li class="nav-item"><a class="nav-link" href="#" id="upload">UPLOAD CV</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="download">DOWNLOAD CV</a></li>
</ul>