Блог

Главная - Вопросы по программированию - Установить значение ngModel для типа file

Установить значение ngModel для типа file

#javascript #angular

#javascript #угловой

Вопрос:

Я новичок в angular 6. Я создаю проект с использованием angular. Я работаю с загрузкой файлов в angular 6. Я просто обновляю значение модели file, но получаю ошибку.

Вот код

 <input type="file"  (change)="onFileChanged($event)" name="file" [(ngModel)]="info.file">
  ngOnInit() {
    this.info.file = this.profileImg // this contains the image path
  }



onFileChanged(event: any) {
    this.files = event.target.files;
    if (event.target.files amp;amp; event.target.files[0]) {
      const file = event.target.files[0];

      const reader = new FileReader();
      reader.onload = e => this.profileImg = reader.result;

      reader.readAsDataURL(file);
    }
  }

this.profile изображение — это путь к изображению, подобный изображению

ОШИБКА DOMException: не удалось установить свойство ‘value’ для ‘HTMLInputElement’: Этот элемент ввода принимает имя файла, которое может быть программно установлено только в пустую строку.

Комментарии:

1. разместите некоторый код вместо одной строки.

2. вопрос обновлен…….

3. Где вы объявляете profileImg и когда получаете ошибку?

4. Также опубликуйте код этого метода: onFileChanged($event)

5. profileimg содержит путь к изображению …

Ответ №1:

Попробуйте удалить [(ngModel)] from input и привязать его к onFileChanged($event) методу. 

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

onFileChanged(event: any) {
    this.files = event.target.files;
    if (event.target.files amp;amp; event.target.files[0]) {
      const file = event.target.files[0];

      const reader = new FileReader();
      reader.onload = e => this.profileImg = reader.result;

      reader.readAsDataURL(file);

      this.info.file = this.profileImg
    }
}

См. Эту проблему: проблема с Angular