如何将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/