Vue计算属性中的FileReader（）不起作用

Question

我试图根据我拖到屏幕上的图像渲染一系列图像缩略图。

我的数据如下：

data() {
  return {
    files: [File1, File2, File3]
  }
}

...每个File都是blob。

这是我的computed属性，应该只返回我每个File blobs结果

thumbnails() {
  return files.map(file => {
    let reader = new FileReader();
    reader.readAsDataURL(file);

     return reader.result
  })
}

然后我尝试在屏幕上呈现为：

<ul>
  <li v-for="thumbnail in thumbnails>
    <img :src="thumbnail">
  </li>
</ul>

它不起作用。

然而，非常有趣的是，如果我在files.map(...)中插入断点，它确实有效！我错过了什么？

Answer 1

我错过了什么？

事实上FileReader.readAsDataURL()方法是异步的。

我建议你重新考虑你的流程，或者你可以使用vue-async-computed包。

使用它你可以写它喜欢这个：

{
  asyncComputed: {
    thumbnails() {
      return Promise.all(this.files.map((file) => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          // handle success
          reader.addEventListener('load', () => {
            resolve(reader.result);
          }, false);
          // handle error
          reader.addEventListener('error', () => {
            reject();
          }, false);
          // reading file
          reader.readAsDataURL(file);
        });
      }));
    },
  }
}

不要忘记，直到Promise.all被解决，thumbnails将是null，所以你应该为你的模板添加检查。