Мне нужно отправить данные с сервера с файлом. Я хочу отправить данные from Form
, но он не отправляет данные в этом формате. Я объясняю и показываю свой код.
У меня есть эта форма в angualr:
InitialForm(): void {
this.addUserFG = this.formBuilder.group({
name: ['', Validators.compose([Validators.required])],
family: ['', Validators.compose([Validators.required])],
email: [''],
password: ['', Validators.compose([Validators.required])],
confirmPassword: ['', Validators.compose([Validators.required])],
phoneNumber: ['', Validators.compose([Validators.required])],
username: ['', Validators.compose([Validators.required])],
photo: ['']
})
}
, и я использую это для файла uplaod в форме:
<mat-form-field class="upload_file" appearance="outline">
<ngx-mat-file-input
formControlName="photo"
>
</ngx-mat-file-input>
</mat-form-field>
и отправляю данные с сервера следующим способом:
RegisterUser(): void {
let addModel={} as AddUserModel;
const selectedFiles = this.addUserFG.get('photo').value;
addModel = Object.assign({}, this.addUserFG.value);
if (selectedFiles) {
addModel.photo = selectedFiles['files'][0];
}
console.log(addModel)
this.loading = true;
this.subscriptions = this.userManagerService.CreateWithFile(addModel, 'Register/AddUser')
.subscribe(
(user: HttpEvent<any>) => {
switch (user.type) {
case HttpEventType.UploadProgress:
if (user.total) {
this.queueProgress = Math.round(user.loaded / user.total * 100);
}
break;
case HttpEventType.Response:
if (user.body['success']) {
this.queueProgress = null;
this.alertService.success('', user.body['message']);
this.route.navigate(['/user-manager']);
} else {
this.cdRef.detectChanges();
}
this.loading = false;
this.queueProgress = null;
break;
}
},
error => {
this.loading = false;
this.queueProgress = null;
});
}
и этот сервив:
CreateWithFile(item: any, url: string): Observable<any> {
const Url = `${this.appConfig.apiEndpoint + url}`;
const formData: FormData = new FormData();
for (const key in item) {
if (item.hasOwnProperty(key)) {
if (item[key] instanceof File) {
formData.append(key, item[key], item[key].name);
} else {
formData.append(key, item[key]);
}
}
}
return this.httpClient
.post(Url, formData, {
headers: this.headers,
reportProgress: true,
observe: 'events'
})
.pipe(map(response => response || {} as HttpEvent<any>));
}
но он отправляет данные с сервера в неправильном формате:
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="name"
کیانوش
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="family"
درتاج
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="email"
kiadr9372@gmail.com
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="password"
dfgfdgdgdgdg
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="confirmPassword"
dfgfdgdgdgdg
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="phoneNumber"
09159810616
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="username"
kia9372
------WebKitFormBoundary4A2Rk4Jh2i4oijGC
Content-Disposition: form-data; name="photo"; filename="Capture.PNG"
Content-Type: image/png
------WebKitFormBoundary4A2Rk4Jh2i4oijGC--
Что за вопрос? как я могу решить эту проблему ???