загрузить форму с файлом в angular 9 - PullRequest
0 голосов
/ 01 мая 2020

Мне нужно отправить данные с сервера с файлом. Я хочу отправить данные 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--

Что за вопрос? как я могу решить эту проблему ???

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...