Tengo un "archivo" de objeto de entrada de varios archivos y quiero generar un blob de vista previa. El objeto de vistas previas es correcto, sin embargo, hacer files.value.map no funciona. Quiero adjuntar el blob al objeto "archivos". ¿Qué me estoy perdiendo?
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 }Esto está en blanco en la plantilla vue. Sin embargo, console.log es correcto.
<span v-for="file in files" :key="file">{{file.preview}}</span>Esto es correcto, mostrando el blob de vista previa:
<span v-for="preview in previews" :key="preview">{{preview}}</span>Al pasar una función async a files.value.map , obtienes una matriz de Promise s. No puede await esta matriz directamente, porque solo puede esperar una Promise .
En su lugar, puede usar Promise.all para convertir una matriz de Promise en una Promise de una matriz:
await Promise.all(files.value.map(async(file) => { console.log(file) file.preview = await toBlob(file) }))Estoy bastante seguro de que la asignación de file.preview rompe la reactividad. Podrías probar esto en Vue3:
let { preview } = toRefs(file) preview.value = await toBlob(file)Referencias:
No parece que realmente necesite adjuntar una propiedad .preview al objeto File , ya que ya los almacenó en previews[] , así que simplemente elimine ese código:
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) //})) }) Las direcciones URL de los objetos no se representarían como imágenes con interpolación de cadenas (es decir, entre pares de corchetes). Es decir, {{previewObjectUrl}} solo representaría la URL como una cadena.
Para representar los blobs, las direcciones URL de los objetos deben vincularse a un <img>.src :
<img v-for="preview in previews" :key="preview" :src="preview">