sprowadzić słupek z wieloczęściowych danych formularzy

Question

ja ściągam URL tak:

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

Moje dane API oczekuje się od multipart/form-data więc używam content-type tego typu ... Ale to daje mi odpowiedź z kodem statusu 400.

Co jest nie tak z moim kodem?

Answer 1

Ty ustawiania Content-Type być multipart/form-data, ale następnie przy użyciu JSON.stringify na dane ciało, która zwraca application/json. Masz niedopasowanie typu treści.

Konieczne będzie zakodowanie danych jako multipart/form-data zamiast json. Zwykle używa się multipart/form-data podczas przesyłania plików i jest nieco bardziej skomplikowany niż application/x-www-form-urlencoded (który jest domyślny dla formularzy HTML).

Specyfikacja multipart/form-data znajduje się w RFC 1867.

Aby uzyskać instrukcje dotyczące przesyłania tego rodzaju danych za pośrednictwem javascript, zobacz here.

Podstawową ideą jest użycie obiektu FormData (nieobsługiwane w 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

Byłem niedawno w pracy z błędami nieprawidłowej strony i pracował na to. Zwinięcie przykładem błędów IPF, aby przesłać plik wygląda tak:

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" 

Podstawowym założeniem jest to, że każda część (podzielona przez ciąg w boundary z --) ma własne nagłówki (Content-Type w drugiej części, na przykład.) Obiekt FormData zarządza tym wszystkim, więc jest to lepszy sposób na osiągnięcie naszych celów.

Oznacza to sprowadzić API tak:

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