FileReaderの画像プレビューの例をVueコンポーネントに切り替えるにはどうすればいいですか？

Question

プレビュー画像を表示するためにFileReaderのを使用する方法に関するMDNの例があります：

function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /^image\//; 

    if (!imageType.test(file.type)) { 
     continue; 
    } 

    var img = document.createElement("img"); 
    img.classList.add("obj"); 
    img.file = file; 
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed. 

    var reader = new FileReader(); 
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
    reader.readAsDataURL(file); 
    } 
} 

私はVueのコンポーネントでこれを使用する方法を思ったんだけど。非同期の部分は扱いが簡単ではないようですが、私はVueの新機能ですが、これは高度な機能です。

Answer 1

<img :src="src" id="img>タグとsrcプロパティを持つコンポーネントを、dataオブジェクトに作成します。ギャラリーを作成したい場合は、親コンポーネントのidx小道具をファイルとともに渡すことができます。また、画像をIDで参照するときは、img要素ごとに一意のIDが必要です。 https://jsfiddle.net/8dnhh23o/
複数の画像の例：https://jsfiddle.net/o1037uks/

メソッドを作成しloadPicture

loadPicture(file) { 
    let self = this; 
    let img = document.getElementById('img'); 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
    self.src = e.target.result; 
    } 
    reader.readAsDataURL(file); 
}` 

はその後mountedライフサイクル

mounted() { 
    this.loadPicture(); 
} 

での作業例を、このメソッドを呼び出します