не могу отправить multipart с fetch, но axios работает нормально - PullRequest
Новая
       40

не могу отправить multipart с fetch, но axios работает нормально

1 голос
/ 05 октября 2019

Вот мой код: 

function uploadImage(payload) {
  return fetch('/api/storage/upload/image/', {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: 'application/json',
      Authorization: 'Bearer <token>',
    },
    body: payload,
  });
}
function uploadImage2(payload) {
  return axios.post('/api/storage/upload/image/', payload, {
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: 'application/json',
      Authorization: 'Bearer <token>',
    },
  });
}
function test(file, meta_data) {
  var formBody = new FormData();
  formBody.set('image', file);
  formBody.set('meta_data', meta_data);

  uploadImage(formBody);
  // doesn't work
  uploadImage2(formBody);
  // works
}

Может кто-нибудь объяснить мне, как я должен отправлять многочастные запросы с fetch?

Ошибка, которую я получаю с этим кодом:400 bad request, file and meta_data are null.

Ответы [ 2 ]

2 голосов
/ 06 октября 2019

Не используйте этот заголовок: 'Content-Type': 'multipart/form-data'.

Удалите заголовок, и он должен работать.

Объяснение:

При использовании fetch с содержимым-Type ':' multipart / form-data 'вы также должны установить boundary (разделитель между полями, которые отправляются в запросе).

Без границы сервер, получающий запрос, не будет знать, где начинается поле и где оно заканчивается.

Вы можете установить границу самостоятельно, но лучше позволить браузеру сделать это. автоматически путем полного удаления заголовка 'Content-Type'.

Вот еще кое-что: Загрузка файлов с использованием 'fetch' и 'FormData'

0 голосов
/ 05 октября 2019

Вот что сработало для меня: 

function uploadImage(payload) {
  return fetch('/api/storage/upload/image/', {
    method: 'POST',
    headers: {
      Authorization: 'Bearer <token>',
    },
    body: payload,
  });
}

Сравнивая запросы cURL, отправленные браузером, я обнаружил, что в запросе axios есть это: 

"Content-Type": "multipart/form-data; boundary=---------------------------19679527153991285751414616421",

Итак, я понялчто, когда вы вручную указываете тип содержимого, fetch учитывает это и ничего не трогает, хотя все еще делает то, что ему нужно: - / поэтому вы просто не должны указывать его, fetch будет знать себя, так как вы используете formData()

...