Как одним HTTP запросом отправить данные пользователя и загрузить аватарку на сервер?
Создаю пользователя. Отправляю данные о пользователе из формы, методом 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--
На стороне сервера получаю просто пустой объект.
Источник: Stack Overflow на русском