отправка файла и json в запросе POST multipart / form-data с axios

Question

Я пытаюсь отправить файл и несколько json в одном и том же составном POST-запросе на мою конечную точку REST.Запрос сделан непосредственно из javascript с использованием библиотеки axios, как показано в методе ниже.

doAjaxPost() {
    var formData = new FormData();
    var file = document.querySelector('#file');

    formData.append("file", file.files[0]);
    formData.append("document", documentJson);

    axios({
        method: 'post',
        url: 'http://192.168.1.69:8080/api/files',
        data: formData,
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (response) {
        console.log(response);
    });
}

Однако проблема заключается в том, что когда я проверяю запрос в инструментах разработчика Chrome на вкладке сети, я не нахожу Content-Type поле для document, а для file поле Content-Type равно application/pdf (я отправляю pdf-файл).

На сервере Content-Type для document есть text/plain;charset=us-ascii.

Обновление:

Мне удалось сделать правильный запрос через Почтальон, отправив document как .json файл.Хотя я обнаружил, что это работает только на Linux / Mac.

Answer 1

вам нужно только добавить правильные заголовки к вашему запросу

axios({
  method: 'post',
  url: 'http://192.168.1.69:8080/api/files',
  data: formData,
  header: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
          },
    })

Answer 2

Чтобы установить тип контента, вам нужно передать объект, подобный файлу.Вы можете создать его, используя Blob.

const obj = {
  hello: "world"
};
const json = JSON.stringify(obj);
const blob = new Blob([json], {
  type: 'application/json'
});
const data = new FormData();
data.append("document", blob);
axios({
  method: 'post',
  url: '/sample',
  data: data,
})