如何使用 reactjs 在 firebase v9 云存储中上传多张图片

Question

我刚开始学习使用 firebase 存储来对 js 做出反应。 我正在尝试在 firebase v9 中上传多张图片。 我已成功上传单张图片，但无法上传多张图片。 我看过教程，但没有更新。

此外，在上传所有图像后，我想要一个数组中的所有 URL，因为我还需要在后端发送它。

 const [progress, setProgress] = useState(0);
 const [selectedImages, setSelectedImages] = useState([]);

    const onSelectFileUpload = (e) => {
        e.preventDefault();
        const file = e.target[0].files[0];
        uploadFiles(file);

    };

    const uploadFiles = (file) => {
        //
        if (!file) return;
        const sotrageRef = ref(storage, `files/${file.name}`);
        const uploadTask = uploadBytesResumable(sotrageRef, file);

        uploadTask.on(
            "state_changed",
            (snapshot) => {
                const prog = Math.round(
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                );
                setProgress(prog);
            },
            (error) => console.log(error),
            () => {
                getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
                    console.log("File available at", downloadURL);
                });
            }
        );
    };

HTML 代码：

    <form onSubmit={onSelectFileUpload}>
            <div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">

                <input
                    type="file"
                    name="images"
                    multiple
                    accept="image/png , image/jpeg, image/webp"
                />

                <div className=" py-3 text-right ">
                    <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
                </div>
            </div>
        </form>

谁能指导我如何解决它？

Answer 1

解决了

   const uploadFiles = (files) => {
        const promises = []
        files.map((file) => {
            console.log('loop');

            const sotrageRef = ref(storage, `files/${file.name}`);

            const uploadTask = uploadBytesResumable(sotrageRef, file);
            promises.push(uploadTask)
            uploadTask.on(
                "state_changed",
                (snapshot) => {
                    const prog = Math.round(
                        (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                    );
                    setProgress(prog);
                },
                (error) => console.log(error),
                async () => {
                    await getDownloadURL(uploadTask.snapshot.ref).then((downloadURLs) => {
                        setURLs(prevState => [...prevState, downloadURLs])
                        console.log("File available at", downloadURLs);
                    });
                }
            );


        })
        Promise.all(promises)
            .then(() => alert('All images uploaded'))
            .then(err => console.log(err))

    };

    console.log(selectedImages);
    console.log(URLs);
    const handleSubmit = () => { uploadFiles(images); }

Answer 2

import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { storage } from "../../firebase";


async function uploadImage(image) {
  const storageRef = ref(storage, `/posts/${Date.now()}-${image.name}`);

  const response = await uploadBytes(storageRef, image);
  const url = await getDownloadURL(response.ref);
  return url;
}

export default async function uploadImages(images) {
  const imagePromises = Array.from(images, (image) => uploadImage(image));

  const imageRes = await Promise.all(imagePromises);
  return imageRes; // list of url like ["https://..", ...]
}