Вопрос:

ANGULAR 4 Base64 Загрузить компонент

angular upload base64 components directive

9767 просмотра

2 ответа

28 Репутация автора

Я новичок в Angular. Я использую Angular 4. Если требуется отправить изображение base64 в качестве одного из членов модели в веб-интерфейс API. Есть ли угловой компонент или директива для, которая бы связывала base64 с указанной моделью?

Ценю и благодарю за помощь.

Автор: Vijayavel Источник Размещён: 11.01.2018 09:51

Ответы (2)


2 плюса

10819 Репутация автора

Чтобы ответить на ваш точный вопрос ...

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

Нет, это выходит за рамки Angular. Вы можете использовать общие способы кодирования данных в base64 .

Затем вы можете создать средство доступа к контрольным значениям , которое позаботится о преобразовании, чтобы сделать ваш код более СУХИМЫМ.

Автор: Lazar Ljubenović Размещён: 11.01.2018 10:06

12 плюса

331 Репутация автора

Решение

Вы можете загрузить изображение и сохранить его в кодировке base64.

В вашем templateдобавить это

<div class="image-upload">
    <img [src]="imageSrc" style="max-width:300px;max-height:300px"/>
    <input name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />
</div> 

И это будет обрабатывать ваш механизм загрузки из component

  private imageSrc: string = '';

  handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('invalid format');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imageSrc = reader.result;
    console.log(this.imageSrc)
  }

Вы также можете использовать этот код, чтобы сделать компонент для загрузки изображения

Автор: Arnaf Aziz Размещён: 12.01.2018 04:08
Вопросы из категории :
32x32