Vue.js 如何将FileReader图像预览示例转换为Vue组件？

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);
  }
}

函数句柄文件（文件）{
对于（var i=0；i

---

我想知道如何在Vue组件中使用它。在我看来，异步部分并不容易处理，但我对Vue是新手，这可能是一项高级功能。

创建一个组件，在其

数据对象中使用
标记和
src
属性。如果你想制作一个图库，你可以将一个来自父组件的idx道具和一个文件一起传递给一个img id，因为当我们按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
lifecycle中调用此方法

mounted() {
     this.loadPicture();
}

工作示例：

多个图像示例：