Многостраничный пост Axios с объектом

Вот моя конечная точка spring boot для публикации file и object в одном запросе

@PostMapping(
    value = ["/add"],
    consumes = [
        MediaType.MULTIPART_FORM_DATA_VALUE,
        MediaType.APPLICATION_JSON_VALUE,
        MediaType.APPLICATION_FORM_URLENCODED_VALUE,
        MediaType.APPLICATION_OCTET_STREAM_VALUE
    ]
)
fun addUser(
    @RequestPart("user") user: UserDTO,
    @RequestPart("file") file: MultipartFile,
): Long = userService.addUser(user, file)

И это прекрасно работает, когда я использую postman вот так:

Как я могу добиться точно такой же конфигурации с помощью axios. Я пробовал много решений, и каждый раз я получаю сообщение об ошибке:

 org.apache.tomcat.util.http.fileupload.impl.InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded

Или это:

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

Вот моя axios просьба

 const file = new FormData()
 file.append('file', photo, photo.name)

     const response = await axios.post(
        '/user/add',
        JSON.stringify({
            user,
            file
       }),
          {
            withCredentials: true,
          }
    )

Я также пробовал это:

 const file = new FormData()
 file.append('file', photo, photo.name)

     const response = await axios.post(
        '/user/add',
        {
            user,
            file
       },
          {
            withCredentials: true,
          }
    )

Я также попытался установить content-type на multipart/form-data

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
0
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

const user  = {
  username: "user123"
};
const json = JSON.stringify(user);
const blob = new Blob([json],{
  type: 'application/json'
});

const body = new FormData();
body.append("user" ,blob);
body.append("file" ,photo);

axios({
  method: 'post',
  url: '/user/add',
  data: body,
});

Работает идеально, большое спасибо. Я бы никогда не подумал о таком решении

user123145152323 19.11.2022 10:09

Другие вопросы по теме