Управление загрузкой файлов реактивных форм

Question

Issue

В настоящее время у меня есть форма с несколькими полями, одним из которых является поле загрузки файла.Все они являются частью FormGroup, который объявлен в моем конструкторе.Теперь все текстовые элементы управления, к которым я могу получить доступ, используя this.control.value, кроме моего файлового элемента управления.Когда я пытаюсь получить доступ к value элемента управления формы для файла, все, что я получаю, это C:/fakepath/image.png.

Есть ли способ получить доступ к фактическим данным файла, чтобы я мог загрузить их в свой API?

---

Код

Мои FormControl объявления:

/**
 * Category of the product
 */
public category = new FormControl('', [
  Validators.required
]);

/**
 * Name of the product
 */
public name = new FormControl('', [
  Validators.required,
  Validators.minLength(3)
]);

/**
 * Description of the product
 */
public description = new FormControl('', [
  Validators.required
]);

/**
 * Price of the product
 */
public price = new FormControl('', [
  Validators.required
]);

/**
 * Image of the product
 */
public image = new FormControl('', [
  Validators.required
]);

Мой конструктор для страницы / компонента:

constructor(private api: ApiService,
  private formBuilder: FormBuilder) {

    this.productForm = formBuilder.group({
      category: this.category,
      name: this.name,
      description: this.description,
      price: this.price,
      image: this.image
    });
}

Как яв настоящее время пытаюсь получить доступ к файлу

public async createProduct(): Promise<any> {
  console.log(this.image.value);
}

Answer 1

Шаг 1: Шаблон HTML (file-upload.component.html)

Определение простого тега ввода типа file.Добавьте функцию (изменить) -event для обработки выбора файлов.

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

Шаг 2. Загрузка обработки в TypeScript (в файле компонента)

Определение значения по умолчаниюпеременная для выбранного файла.

fileToUpload: File = null;

Создайте функцию, которую вы используете в (change) -event вашего тега ввода файла:

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

Шаг 3: Служба загрузки файлов

Загружая файл с помощью POST-метода, вы должны использовать FormData, поскольку вы можете добавить файл в запрос http.

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    // Append image file to formdata as a seperate property
    formData.append('fileKey', fileToUpload, fileToUpload.name);

    // Append reactive form data too in a seperate property
    formData.append('productForm', JSON.stringify(this.productForm, null, 4));
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

Answer 2

Есть ли способ получить доступ к фактическим данным файла, чтобы я мог загрузить их в свой API?

Вы можете получить к ним доступ таким образом:

// template
<input
 type="file" (change)="onFileChanged($event)"
>

// component
onFileChanged(event) {
  // this.image will be updated each time the file
  // in input will be changed
  this.image = event.target.files[0];
  console.log(this.image);
}


createProduct(): Promise<Product> {
  console.log(this.image);
  const formData = new FormData();
  formData.append(
    'image',
    this.image
  );

  // add other fields to formData:
  formData.append("name", this.productForm.controls['name'].value);

  formData.append("description", this.productForm.controls['description'].value);

  const url = 'urlToApi';

  return this.http.post(url, formData)
    .toPromise()
    .then(response => {
      return response;
    })
    .catch(err => console.log(err));
}