Làm cách nào để tôi tải lên một tệp với API tìm nạp JS?

Tôi vẫn đang cố quấn đầu quanh nó.

Tôi có thể yêu cầu người dùng chọn tệp (hoặc thậm chí nhiều) với đầu vào tệp:

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

Và tôi có thể bắt submitsự kiện bằng cách sử dụng <fill in your event handler here>. Nhưng một khi tôi làm, làm thế nào để tôi gửi các tập tin bằng cách sử dụng fetch?

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

Đây là một ví dụ cơ bản với ý kiến. Các uploadchức năng là những gì bạn đang tìm kiếm:

// 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);

Tôi đã làm nó như thế này:

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

Một lưu ý quan trọng để gửi tệp bằng Fetch API

Người ta cần bỏ qua content-typetiêu đề cho yêu cầu Tìm nạp. Sau đó, trình duyệt sẽ tự động thêm Content typetiêu đề bao gồm cả Ranh giới biểu mẫu trông giống như

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

Ranh giới biểu mẫu là dấu phân cách cho dữ liệu biểu mẫu

Nếu bạn muốn nhiều tập tin, bạn có thể sử dụng

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

Để gửi một tập tin duy nhất, bạn chỉ có thể sử dụng các Fileđối tượng từ input's .filesmảng trực tiếp như giá trị của body:trong bạn fetch()khởi tạo:

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],
});

Điều này hoạt động vì Filekế thừa từ Blobvà Bloblà một trong những BodyInitloại được cho phép được xác định trong Tiêu chuẩn tìm nạp.

Câu trả lời được chấp nhận ở đây là một chút ngày. Kể từ tháng 4 năm 2020, một cách tiếp cận được đề xuất trên trang web MDN cho thấy việc sử dụng FormDatavà cũng không yêu cầu đặt loại nội dung. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Tôi đang trích dẫn đoạn mã để thuận tiện:

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

Nhảy ra từ cách tiếp cận của Alex Montoya cho nhiều yếu tố đầu vào tệp

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

Vấn đề đối với tôi là tôi đã sử dụng một answer.blob () để điền dữ liệu biểu mẫu. Rõ ràng bạn không thể làm điều đó ít nhất là với phản ứng bản địa nên cuối cùng tôi đã sử dụng

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

Fetch dường như nhận ra định dạng đó và gửi tệp nơi uri đang trỏ.

Đây là mã của tôi:

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>