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

Question

Vue dev tools screen shot Console log Screen shot

脚本代码：

 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(...) 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

您不应在 for 或 forEach 循环中使用 await 关键字，请参阅 here or 。

您应该按如下方式使用 Promise.all()（未经测试）：

  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

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

How to upload multiple images to firebase v9 storage and get all download URL 's to update it in cloud firestore database using Vue.js

javascript

firebase

vue.js

google-cloud-firestore

google-cloud-storage

脚本代码：

控制台日志数据：