lấy bài với dữ liệu mẫu nhiều phần dữ liệu

Question

Tôi lấy một URL như sau:

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 tôi hy vọng các dữ liệu được của multipart/form-data vì vậy tôi đang sử dụng content-type thuộc loại này ... Nhưng nó đem lại cho tôi một phản hồi với mã trạng thái 400.

Mã của tôi có vấn đề gì?

Answer 1

Bạn đang đặt Content-Type thành multipart/form-data, nhưng sau đó sử dụng JSON.stringify trên dữ liệu nội dung, trả về application/json. Bạn có loại nội dung không khớp.

Bạn cần mã hóa dữ liệu của mình thành multipart/form-data thay vì json. Thông 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 (đây là mặc định cho biểu mẫu HTML).

Đặc điểm kỹ thuật cho multipart/form-data có 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 here.

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

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

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

    fetch(url, { 
    method: 'POST', 
    body: formData 
    }).then(function (response) { 
    ... 
    }); 
} 

Answer 2

Gần đây tôi đã làm việc với IPFS và làm việc này ra. Một ví dụ curl cho IPFS để tải lên một tập tin trông như thế này:

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 (chia bởi chuỗi trong boundary với --) có đó là tiêu đề riêng (Content-Type trong phần thứ hai, ví dụ.) Đối tượng FormData quản lý tất cả đ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.

này dịch để lấy API như thế này:

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