我正在用Next js和firebase创建一个电子商务应用程序。最初,用户将张贴列表/项目。此项目帖子包含诸如标题、详细信息、价格、创建时间、折扣、...和图像数组[]等字段。这个数组首先被上传到Firebase存储器,并且返回的链接被存储在Firestore中的那个数组中。
const uploadFiles = async () => {
setLoader(true);
const uid = uuid();
const promises = images.map((file) => {
const storageRef = ref(
machineStorage,
`machineImages/${session?.user?.email}/${uid}/${file.name}`
);
return uploadBytes(storageRef, file.blob);
});
// upload all files
const res = await Promise.all(promises);
// get download URLs
const links = await Promise.all(res.map((r) => getDownloadURL(r.ref)));
console.log({ links });
// Add Firestore document
const colRef = collection(machineDB, "machinePosts");
const docRef = await addDoc(colRef, {
year: year,
price: Number(price),
lastPrice: Number(lastPrice),
negotiable: negotiable,
images: links,
detail: detail,
title: title,
discount: discount,
phone: phone,
location: location,
storageRef: uid,
postedDate: serverTimestamp(),
});
router.replace("/machine");
setLoader(false);
};
现在我正在处理帖子的更新。因此,我所做的是,我正在获取文档的id和作出编辑,然后如果用户决定的新值,他们更新或如果没有,他们取消。
async function page({ params: { machineid } }) {
let machine = "";
if (machine == "") {
const docRef = doc(db, "machinePosts", machineid);
await getDoc(docRef).then((res) => {
machine = res.data();
});
}
return (
<div>
<Header />
<EditMachine machine={machine} />
</div>
);
}
export default page;
在EditMachine
组件中
function EditMachine({machine}) {
const [changed, setChanged] = useState(false);
const [title, setTitle] = useState(machine == "" ? "" : machine.title);
const [detail, setDetail] = useState(machine == "" ? "" : machine.detail);
const [location, setLocation] = useState(machine == "" ? "" : machine.location);
return (...);
}
但是我在纠结的是我怎么能更新图片呢?B/c图像存储在Firebase存储中,链接存储在Firestore中。
仓储结构
machineImages --> [userEmail] --> [uid] --> filename
uid
是一个包含图像数组的文件夹。并且其引用作为storageRef
存储在FireStore内。而filename
是所存储的实际图像。
我的firestore数据结构是
machinePost --> [docid] --> {
images: [
0: [imageLink],
1: [imageLink],
2: [imageLink],
3: [imageLink],
],
storageRef: [uid for the storage folder that's mentioned above]
}
所以基于此,如果用户删除一个图像,添加另一个图像,对图像进行排序,我怎么能处理呢?
1条答案
按热度按时间hujrc8aj1#
一种解决方案是在Firestore文档中有一个额外的数组,其中包含图像文件名。
基于此数组,您可以在前端轻松检测用户是否对一个或多个图像进行了更改(添加,删除,修改,数组顺序更改等)。如果您为需要它的文件重新生成downloadURL,则更新两个数组(文件名数组和downloadURL数组)并更新Firestore文档。