我正在尝试根据拖到屏幕上的图像来渲染一系列图像缩略图。
我的数据如下所示:
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(...)
中插入断点,它确实有效!我错过了什么?
最佳答案
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
,因此您应该将检查添加到您的模板。
关于javascript - Vue 计算属性中的 FileReader() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55742174/