如何將FileReader圖像預覽示例轉換爲Vue組件？

Question

有從MDN如何使用的FileReader顯示預覽圖像的例子：

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對象。如果您想創建一個圖庫並將其添加到一個img id，您可以從父組件傳遞一個idx prop，因爲當我們通過id引用圖像時，我們需要每個img元素的唯一ID。

創建方法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(); 
} 

工作例如：https://jsfiddle.net/8dnhh23o/
多個圖像例如：https://jsfiddle.net/o1037uks/