Как использовать тип файла ввода в угловом материале - PullRequest
Новая
       10

Как использовать тип файла ввода в угловом материале

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

Как использовать файл типа ввода в угловом материале

Привет, я использую угловой материал для проектирования.когда я захожу на сайт угловой материал, там нет элемента ввода типа файла.Кто-нибудь знает об этом.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Вот обходной путь, если все, что вам нужно, это красиво отображаемая кнопка ввода файла.

HTML 

<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">

Компонент 

onFileSelected() {
  const inputNode: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    const reader = new FileReader();

    reader.onload = (e: any) => {
      this.srcResult = e.target.result;
    };

    reader.readAsArrayBuffer(inputNode.files[0]);
  }
}

Вдохновленный этим угловым материаломКомментарий к выпуску Github https://github.com/angular/material2/issues/3262#issuecomment-309000588

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

Angular Material еще не поддерживает обходной путь для загрузки файла.Есть альтернатива архивировать это.например, использование внешних библиотек.

angular-material-fileupload : ссылка на пакет npm

Поддерживаемые функции :

  • Перетаскивание
  • общие загрузки
  • индикатор выполнения
  • размер файла и многое другое ...

ngx-material-file-input : Ссылка на репозиторий

Поддерживаемые функции :

  • ngx-mat-file-input компонент,использовать внутри Angular Material mat-form-field
  • a FileValidator с maxContentSize, чтобы ограничить размер файла
  • a ByteFormatPipe для форматирования размера файла в удобочитаемом формате
  • и более мелких второстепенных функций ...

Обновление

См. Ответ здесь, если вам просто нужен обходной путь без внешней библиотеки https://stackoverflow.com/a/53546417/6432698

...