2017-05-01 9 views
0

私はハックで解決された問題を抱えており、私はそれを解決するより良い方法を探しています。イメージを変更するより良い方法src async [angular 4]の間に?

私がしたいのは、ユーザーが入力:ファイルをクリックし、アップロードすることなく(FileReaderを使用して)画面に表示する必要がある画像を選択する場合です。

問題がある、私はFilereadersのonloadイベントメソッド内でほとんど何に到達することはできません(私は画像を変更するためのthis.imageに到達する必要があります)悲しいことに、私は私のコード

HTML

let el = <HTMLImageElement>document.querySelector(".veik"); 
el.src = this.result;` 

を使用:

<input type="file" name="test" id="file" (change)="onChange($event)"> 

TS:

onChange($event){ 
    this.readThis($event); 
} 

ReadThis(inputValue: any) : void { 
    var file:File = inputValue.target.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onload = function(e){ 
     let el = <HTMLImageElement>document.querySelector(".veik"); 
     el.src = this.result; 
    }; 

    myReader.readAsDataURL(file); 
} 
+0

次いで、コンポーネントのプロパティに画像のソースに結合 'onload'にその値を設定することであろう角度でそれを行うための方法。 –

答えて

0

FileItem型を使用してテンポラリファイルにアクセスしようとする可能性があります

例: [1]。以下のように、一般的なFileItemクラスに: (inputValueで:FileItem):あなたの(任意のinputValueで)を変更します。 のconstファイル:ファイル=アイテム[2]、

を同様に、アップロードされたファイルへのアクセスを得るために定数を作成します。

_file今、あなたは助けfile.name、file.sizeなど

希望のようなものをアクセスすることができます。

乾杯

関連する問題