如何将多个图像上传到 firebase v9 存储并获取所有下载 URL 以使用 Vue.js 在云 Firestore 数据库中更新它

Question

Vue dev tools screen shot Console log Screen shot

Script Code:

 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 });
        },
      },
    };

Console Log Data:

• TypeError: Object(...) is not a function at VueComponent._callee$ (fragment.vue?262c:453:1) at tryCatch (runtime.js?96cf:63:1) at Generator.invoke [as _invoke] (runtime.js?96cf:294:1) at Generator.eval [as next] (runtime.js?96cf:119:1) at asyncGeneratorStep (asyncToGenerator.js?1da1:3:1) at _next (asyncToGenerator.js?1da1:25:1)

Answer 1

You should not use the await keyword within a for or a forEach loop, see here or here .

You should use Promise.all() as follows (untested):

  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