web-dev-qa-db-ja.com

angular 5でアップロード前の画像プレビュー

.html

  <input type='file' onchange="readURL(this);" />
  <img id="blah" src="http://placehold.it/180" alt="your image" />

.css

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

.js

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('blah').src=e.target.result
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

アップロードする前に画像のプレビューを表示するこのコードがあります。しかし、私はangular 5で作業しているので、.jsの代わりに.tsファイルを使用します。angular 5。すべてのブラウザで画像を表示してください。

angularfile-uploadpath
6
Mrinalini Pal

.html

入力のイベントattrおよびハンドラーパラメーターを更新します。また、src属性にデータバインディングを使用する必要があります。 nullまたは未定義またはハードコードされたURL（ ' http://placehold.it/18 '）でない場合、以下がsrcを適用します

<input type='file' (change)="readURL($event);" />
<img id="blah" [src]="imageSrc || 'http://placehold.it/180'" alt="your image" />

.ts

コンポーネントtsファイル（クラス）には、ビュー（html）で使用されるプロパティimageSrcがあり、関数はそのクラスのメソッドである必要があります

...
imageSrc: string;
...
constructor(...) {...}
...
readURL(event: Event): void {
    if (event.target.files && event.target.files[0]) {
        const file = event.target.files[0];

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

        reader.readAsDataURL(file);
    }
}
28
Coffee-Tea

以下のコードを使用して画像プレビューを実装しています。

onFileChange(event: any) {
this.userFile = event.target.files[0];
this.imageSelected = this.userFile.name;
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();
  reader.onload = (e: any) => {
    this.imageSrc = e.target.result;
  };
  reader.readAsDataURL(event.target.files[0]);
}}

これはうまく機能し、画像のプレビューを表示します。私が最初に直面した問題は、画像プレビューが生成されるたびにchrome開発者ツールで以下のエラーを受け取ったことです。

null 404 GET Error

すべてが正常に機能しましたが、他のエラーはありません。

Null：1をクリックすると、以下にリダイレクトされました。

null:1

いくつかのいじりとトラブルシューティングの後、私は以下の編集に含めた解決策を見つけることができました。

編集：それを考え出した。私は||を持っていませんでした「 http://placehold.it/18 '」は、component.htmlの[src] = "に含まれています。そのタイミングの問題を推測します。並べ替え済み。これ以上のエラーはありません。

3
fromage9747

次のようにjavascript functionをTypeScriptに変更する必要がある場合があります。

readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = (e:any) => {
             (<HTMLImageElement>document.getElementById('blah')).src=e.target.result 
             //assuming element with id blah will always be an ImageElement
        };

        reader.readAsDataURL(input.files[0]);
    }
}

それであるはずです。

更新

また、プロパティを定義し、それを画像srcにバインドし、それに応じて以下のように値を変更できます。

constructorの前の.tsファイルで、プロパティをurlとして定義し、そのデフォルト値をhttp://placehold.it/180に設定します。

url: string = 'http://placehold.it/180';

以下のように、reader.onload内でこのプロパティを更新できます。

readURL(event:any) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = (event:any) => {
     this.url = event.target.result;
    }

    reader.readAsDataURL(event.target.files[0]);
  }
}

htmlは次のようになります。

<input type='file' (change)="readURL(this);" />
<img id="blah" [src]="url" alt="your image" />
1
Guruprasad Rao

-> this.url = event.target.result;

readURL(event:any) {
    if (event.target.files && event.target.files[0]) {
        var reader = new FileReader();

        reader.onload = (event:any) = > {
            this.url = event.target.result;
        }

        reader.readAsDataURL(event.target.files[0]);
    }
}
1
Gopala raja naika

私は遅れていることは知っていますが、画像と音声の両方でこの問題に遭遇しました。上記のソリューションは、画像ではうまく機能しましたが、音声ではあまりうまくいきませんでした。最終的には、誰もが使用しているFileReaderオブジェクトの代わりにURLオブジェクトを使用することで、すべてが機能するようになりました。次のようなもの

component.tsファイル〜

imgSrc = 'assets/path/to/default/image.jpeg'

imgFileSelected(event: any) {
  if (event.target.files && event.target.files[0]) {
    this.imgSrc = URL.createObjectURL(event.target.files[0]);
  }
}

私のcomponent.htmlは次のようになります〜

<img [src]="imgSrc | sanitizeUrl"> <!-- using a Custom Pipe -->

最後に、コンソールから警告を取り除くカスタムパイプを作成しました。私のパイプは次のとおりです〜

@Pipe({
  name: 'sanitizerUrl'
})
export class SanitizerUrlPipe implements PipeTransform {

  constructor (
    private sanitize: DomSanitizer
  ) {}

  transform(value: string): SafeUrl {
    return this.sanitize.bypassSecurityTrustUrl(value);
  }
}

オーディオタグにこれをどのように使用したかを確認するには、 このリンクをチェックアウトしてください。 わかりやすいコードが2行だけ追加されています。

1
Joseph Vargas