Как одним HTTP запросом отправить данные пользователя и загрузить аватарку на сервер?

Рейтинг: 0Ответов: 0Опубликовано: 04.05.2023

Создаю пользователя. Отправляю данные о пользователе из формы, методом POST на сервер:

POST http://localhost:3344/api/users/register HTTP/1.1
Content-Type: application/json

{
  "name": "Марк",
  "email": "trainer3@gmail.com",
  "password": "abcdefg",
  "gender": "Мужчина",
  "role": "Тренер",
  "location": "Спортивная",
  "birthDate": "2002-02-02",
  "level": "Новичок",
  "trainingType": "Бокс",
  "certificate": "certificate2.pdf",
  "merits": "Персональный тренер и инструктор групповых программ с опытом  более 4х лет.",
  "personalTraining": "true"
}

Так же нужно отправить на сервер аватарку из формы. Для этого отправляю второй HTTP запрос:

POST http://localhost:3344/api/users/avatar HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="test.png"
Content-Type: image/png

< Desktop/test.png
------WebKitFormBoundary7MA4YWxkTrZu0gW--

А можно ли как-то эти два запроса объединить в один?

Просто на сервере я в BFF(Backend for Frontend) хочу в одно действие это сделать, примерно вот так:

users.controller.ts

public async create(
    @Body() dto: CreateClientDto | CreateTrainerDto,
    @UploadedFile(
      new ParseFilePipe({
        validators: [
          new MaxFileSizeValidator({ maxSize: Image.FileMaxSize }),
          new FileTypeValidator({ fileType: Image.FileType }),
        ],
      })
    )
    file: Express.Multer.File,
  ) {
    const newUser = await this.usersService.register(dto);

    if (newUser) {
      return this.usersService.uploadImage(file, authHeader);
    }
}

users.serveice.ts

public async register(newUserDto:  CreateClientDto | CreateTrainerDto) {
    const { data: user } = await firstValueFrom(
      this.httpService
        .post<IClient | IUser>(
          `${this.configService.get('service.users')}/register`,
          newUserDto
        )
    )

    return user;
}

public async uploadImage(file: Express.Multer.File) {
    const form = new FormData();
    form.append('avatar', file.buffer, file.originalname);

    return this.httpService
      .post<IClient | ITrainer>(
        `${this.configService.get('services.users')}/avatar`,
        form,
        {
          headers: {
            ...form.getHeaders()
          },
        }
      )
  }

И в данный момент не соображу как должен выглядеть HTTP запрос, чтобы всё это заработало.


UPD. Отправляю запрос вот таким вот образом:

POST http://localhost:3344/api/users/register HTTP/1.1
Accept: application/json
Content-Type: multipart/data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="application/json"
Content-Type: application/json

{
  "name": "Марк",
  "email": "trainer6@gmail.com",
  "password": "abcdefg",
  "gender": "Мужчина",
  "role": "Тренер",
  "location": "Спортивная",
  "birthDate": "2002-02-02",
  "level": "Новичок",
  "trainingType": "Бокс",
  "certificate": "certificate2.pdf",
  "merits": "Персональный тренер и инструктор групповых программ с опытом  более 4х лет. Специализация: коррекция фигуры и осанки, снижение веса, восстановление после травм, пилатес.",
  "personalTraining": "true"
}

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="test.png"
Content-Type: image/png

< /Desktop/test.png

------WebKitFormBoundary7MA4YWxkTrZu0gW--

На стороне сервера получаю просто пустой объект.

Ответы

Ответов пока нет.