Отправить реактивную форму и изображение в том же запросе - PullRequest
Новая
       33

Отправить реактивную форму и изображение в том же запросе

0 голосов
/ 04 октября 2018

У меня есть Реактивная форма с некоторыми полями: 

this.pointForm = new FormGroup({
  X_WGS84: new FormControl(null, Validators.required),
  Y_WGS84: new FormControl(null, Validators.required),
  country: new FormControl(null),
  state: new FormControl(null),
  ... etc

В методе onSubmit я присваиваю поля из формы классу Point: 

export class Point {
  X_WGS84: number;
  Y_WGS84: number;
  country?: string;
  state?: string;
  ... etc

Но я не знаю, как отправить в одном запросе и данные формы, и изображение. 

    onSubmit() {
    if (this.pointForm.valid) {
      Object.keys(this.pointForm.value).forEach(key => {
        this.point[key] = this.pointForm.value[key] === '' ? null : this.pointForm.value[key];
      });
      this.httpService.addPoint(this.point, this.fileToUpload).subscribe(
        point => {
          this.router.navigate(['/home']);
        },
        error => {
          console.log(error.statusText);
        });
    }
}

Я сделал что-то подобное: 

constructor(private http: HttpClient) {}

addPoint(point: Point, fileToUpload: File): Observable<Point> {
    const formData: FormData = new FormData();
    formData.append('image', fileToUpload, fileToUpload.name);
    formData.append('Point', point);
    return this.http.post<Point>('http://localhost:8000/point/new', formData);
  }

Но:

  • Iне думаю, что я должен делать это таким образом
  • Я думаю, что в случае ошибки, которую я не понимаю:

Error

Как правильно отправлять запросы такого типа?

1 Ответ

0 голосов
/ 05 октября 2018

Функция append (), которую я использую для отправки этого запроса, требует типа Blob или string.Я отправляю объект, поэтому я должен изменить его на строку JSON.Теперь все работает правильно. 

    addPoint(point: Point, fileToUpload: File): Observable<Point> {
        const formData: FormData = new FormData();
        formData.append('image', fileToUpload, fileToUpload.name);
        formData.append('Point', JSON.stringify(point));
        return this.http.post<Point>('http://localhost:8000/point/new', formData);
  }
...