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

Question

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

我的数据是这样的：

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

...其中每个 File 是一个 blob.

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

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

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

FileReader() inside Vue computed property does not work

javascript

filereader

vue.js

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

FileReader() inside Vue computed property does not work

javascript

filereader

vue.js

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