async await promise vue composition api console.log 正确但不在 vue 模板中

Question

我有一个多文件输入对象“文件”，我想生成预览 blob。预览对象是正确的，但是 files.value.map 不起作用。我想将 blob 附加到“文件”对象。我错过了什么？

const files = ref([])
const previews = ref([])

const toBlob = async(file) => {
  const buffer = await file.arrayBuffer()
  const blob = new Blob([buffer])
  const srcBlob = URL.createObjectURL(blob)

  return srcBlob
}

watch(files, async() => {
  previews.value = await Promise.all(
    files.value.map((file) => toBlob(file))
  )

  await Promise.all(files.value.map(async(file) => {
     console.log(file)
     file.preview = await toBlob(file)
  }))
})

 return {
   files,
   previews
 }

这在 vue 模板中是空白的。但是，console.log 是正确的。

<span v-for="file in files" :key="file">{{file.preview}}</span>

这是正确的，显示预览 blob：

<span v-for="preview in previews" :key="preview">{{preview}}</span>

Answer 1

通过将async 函数传递给files.value.map，您将获得Promises 数组。你不能直接await这个数组，因为你只能等待一个Promise。

相反，您可以使用Promise.all 将Promises 的数组转换为数组的Promise：

  await Promise.all(files.value.map(async(file) => {
    console.log(file)
    file.preview = await toBlob(file)
  }))

Answer 2

我很确定 file.preview 的分配会破坏反应性。你可以在 Vue3 中试试这个：

let { preview } = toRefs(file)
preview.value = await toBlob(file)

参考资料：

• https://v3.vuejs.org/guide/reactivity-fundamentals.html#destructuring-reactive-state

Answer 3

看起来您实际上不需要将.preview 属性附加到File 对象，因为您已经将它们存储在previews[] 中，所以只需删除该代码：

watch(files, async() => {
  previews.value = await Promise.all(
    files.value.map((file) => toBlob(file))
  )

  // xxx: remove
  //await Promise.all(files.value.map(async(file) => {
  //   console.log(file)
  //   file.preview = await toBlob(file)
  //}))
})

对象 URL 不会被呈现为带有字符串插值的图像（即在大括号对之间）。也就是说，{{previewObjectUrl}} 只会将 URL 呈现为字符串。

要呈现 blob，对象 URL 必须绑定到 <img>.src：

<img v-for="preview in previews" :key="preview" :src="preview">

demo