Captura de pantalla de las herramientas de desarrollo de Vue Captura de pantalla del registro de la consola
import firebase from "@/firebase"; import { getStorage, ref, uploadBytes, getDownloadURL, updateDoc, } from "firebase/storage"; export default { data() { return { imagesUrl: [], }; }, methods: { chooseFile() { document.getElementById("imgUpload").click(); }, uploadImage(e) { this.files.push(e.target.files[0]); this.images.push(URL.createObjetURL(this.files)); }, createCity: async function () { const docRef = firebase.addDoc( firebase.collection(firebase.firestoreDB, "cities"), { name: "Tokyo", country: "Japan", } ); var photos = []; for (var i = 0; i < this.files.length; i++) { // files.values contains all the files objects const file = this.files[i]; const storage = getStorage(); const metadata = { contentType: "image/jpeg", }; const storageRef = ref(storage, "temp/" + docRef.id + "/" + file.name); const snapshot = await uploadBytes(storageRef, file, metadata); const downloadURL = await getDownloadURL(snapshot.ref); photos.push(downloadURL); } await console.log(photos); await updateDoc(docRef.id, { photosURLs: photos }); }, }, };
- TypeError: Object(...) no es una función en VueComponent._callee$ (fragment.vue?262c:453:1) en tryCatch (runtime.js?96cf:63:1) en Generator.invoke [como _invoke] ( runtime.js?96cf:294:1) en Generator.eval [como siguiente] (runtime.js?96cf:119:1) en asyncGeneratorStep (asyncToGenerator.js?1da1:3:1) en _next (asyncToGenerator.js?1da1 :25:1)
No debe usar la palabra clave await dentro de un bucle for o forEach , consulte here o here .
Debe usar Promise.all() de la siguiente manera (no probado):
const promises = []; for (var i = 0; i < this.files.length; i++) { // files.values contains all the files objects const file = this.files[i]; const storage = getStorage(); const metadata = { contentType: "image/jpeg", }; const storageRef = ref(storage, "temp/" + docRef.id + "/" + file.name); promises.push(uploadBytes(storageRef, file, metadata).then(uploadResult => {return getDownloadURL(uploadResult.ref)})) } const photos = await Promise.all(promises); await console.log(photos); await updateDoc(docRef, { photosURLs: photos }); // <= See the change here docRef and not docRef.id