next.js 如何使用react更新存储在Firebase存储中的图像?

zynd9foi  于 2023-06-22  发布在  React
关注(0)|答案(1)|浏览(97)

我正在用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]

  }

所以基于此,如果用户删除一个图像,添加另一个图像,对图像进行排序,我怎么能处理呢?

hujrc8aj

hujrc8aj1#

一种解决方案是在Firestore文档中有一个额外的数组,其中包含图像文件名。
基于此数组,您可以在前端轻松检测用户是否对一个或多个图像进行了更改(添加,删除,修改,数组顺序更改等)。如果您为需要它的文件重新生成downloadURL,则更新两个数组(文件名数组和downloadURL数组)并更新Firestore文档。

相关问题