Question

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

我的数据如下：

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

...每个File是一个blob。

这是我的computed属性，应该只将每个File 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

我想念什么？

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，因此您应该在模板中添加对它的检查。

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

1 个答案: