web-dev-qa-db-ja.com

ANGULAR 4 Base64 Upload Component

私はAngularを初めて使いました。私はAngular 4.を使用しています。base64Imageをモデルメンバーの1つとしてWeb APIに送信する必要があります。Angularコンポーネントはありますかまたはbase64を前述のモデルにバインドするためのディレクティブ？

感謝し、助けてくれてありがとう。

angularuploadbase64componentsdirective
6
Vijayavel

画像をアップロードして、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)
  }

このコードを使用して、画像をアップロードするコンポーネントを作成することもできます

15
Arnaf Aziz

正確な質問に答えるには...

Base64を上記のモデルにバインドするためのAngularコンポーネントまたはディレクティブはありますか？

いいえ。これはAngularの範囲外です。 base64にデータをエンコードする一般的な方法を使用 。

次に、 制御値アクセサを作成 に変換して、コードをよりドライに保ちます。

2
Lazar Ljubenović