如何将多张图片上传到 Firebase v9 存储并获取所有下载 URL 以使用 Vue 在云火店数据库中更新它.js

Question

Vue开发工具屏幕截图控制台日志屏幕截图

脚本代码：

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

控制台日志数据：

• 类型错误：对象(…(不是函数VueComponent_被调用者$(fragment.vue？262c:453:1(在tryCatch(runtime.js？96cf:63:1(在Generator.invoke[as_invoke](runtime.js？96cf:294:1(在Generator.eval[作为下一个](runtime.js？96cf:119:1(在asyncGeneratorStep(asyncToGenerator.js？1da1:3:1(在_next(asyncToGenerator.js？1da1:25:1(

Answer 1

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

您应该按如下方式使用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