javascript - Vue 计算属性中的 FileReader() 不起作用

Question

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

我的数据如下所示:

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

...其中每个文件都是一个blob。

这是我的计算属性，它应该只返回每个文件 blob的结果

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

What am I missing?

事实上，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，因此您应该将检查添加到您的模板。