tìm nạp bài đăng với dữ liệu biểu mẫu nhiều phần

Question 1

Tôi đang tìm nạp một URL như thế này:

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

API của tôi mong muốn dữ liệu là của multipart/form-datanên tôi đang sử dụng content-typeloại này ... Nhưng nó đang cho tôi phản hồi với mã trạng thái 400.

Có gì sai với mã của tôi?

Question 2

Bạn đang thiết lập Content-Typelà có multipart/form-data, nhưng sau đó sử dụng JSON.stringifytrên dữ liệu body, dữ liệu này sẽ trả về application/json. Bạn có loại nội dung không khớp.

Bạn sẽ cần phải mã hóa dữ liệu của mình multipart/form-datathay vì json. Thường multipart/form-datađược sử dụng khi tải lên tệp và phức tạp hơn một chút so với application/x-www-form-urlencoded(là mặc định cho các biểu mẫu HTML).

Thông số kỹ thuật cho multipart/form-datacó thể được tìm thấy trong RFC 1867 .

Để biết hướng dẫn về cách gửi loại dữ liệu đó qua javascript, hãy xem tại đây .

Ý tưởng cơ bản là sử dụng đối tượng FormData (không được hỗ trợ trong IE <10):

async function sendData(url, data) {
  const formData  = new FormData();

  for(const name in data) {
    formData.append(name, data[name]);
  }

  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  // ...
}

Mỗi bài viết này chắc chắn không phải để thiết lập các Content-Typetiêu đề. Trình duyệt sẽ đặt nó cho bạn, bao gồm cả boundarytham số.

Question 3

Gần đây tôi đã làm việc với IPFS và đã giải quyết vấn đề này. Một ví dụ cuộn tròn cho IPFS để tải lên tệp trông như sau:

curl -i -H "Content-Type: multipart/form-data; boundary=CUSTOM" -d $'--CUSTOM\r\nContent-Type: multipart/octet-stream\r\nContent-Disposition: file; filename="test"\r\n\r\nHello World!\n--CUSTOM--' "http://localhost:5001/api/v0/add"

Ý tưởng cơ bản là mỗi phần (được chia theo chuỗi trong boundaryvới --) có tiêu đề riêng ( Content-Typeví dụ: trong phần thứ hai.) Đối FormDatatượng quản lý tất cả những điều này cho bạn, vì vậy đó là cách tốt hơn để hoàn thành mục tiêu của chúng tôi.

Điều này có nghĩa là tìm nạp API như sau:

const formData = new FormData()
formData.append('blob', new Blob(['Hello World!\n']), 'test')

fetch('http://localhost:5001/api/v0/add', {
  method: 'POST',
  body: formData
})
.then(r => r.json())
.then(data => {
  console.log(data)
})