我希望每次用户上传将使用 Firebase 和 Reactjs 显示的图像答案

【问题标题】：I want every time the user Upload the image it will display using Firebase and Reactjs我希望每次用户上传将使用 Firebase 和 Reactjs 显示的图像
【发布时间】：2021-12-22 07:54:46
【问题描述】：

我使用 Firebase 存储和 Firestore 上传图片我有这个代码来实现这一点：

    // store uploaded Images
    const [images, setImages] = useState([]);
    // store imagesUrls from firebase storage
    const [urls, setUrls] = useState([]);
    const [progress, setProgress] = useState(0);
    


    const handleChange = (e) => {

      e.preventDefault()
    //getting the images the user uploads
        for (let i = 0; i < e.target.files.length; i++) {
          const newImage = e.target.files[i];
          newImage["id"] = Math.random();
          setImages((prevState) => [...prevState, newImage]);
        }

   //then upload them to firebase storage

        const promises = [];
        images.map((image) => {
          const uploadTask = dbStorage.ref(`images/${image.name}`).put(image);
          promises.push(uploadTask);
          uploadTask.on(
            "state_changed",
            (snapshot) => {
              const progress = Math.round(
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100
              );
              setProgress(progress);
            },
            (error) => {
              console.log(error);
            },
    
      // then waits for the imagesURLs and append them to the urlsArray
            async () => {
              await dbStorage
                .ref("images")
                .child(image.name)
                .getDownloadURL()
                .then((urls) => {
                  setUrls((prevState) => [...prevState, urls]);
                });
            }
          );
        });
    
    
    
        Promise.all(promises)
          .then(() => alert("image uploaded"))
          .catch((err) => console.log(err));
      };

然后我有这个 Jsx 代码来显示所有内容

             <div>
                <label className="input__label">
                    Upload Photos<span id="required">*</span>
                </label>

                <input type="file" multiple className="upload__field" onChange={handleChange}/>
                </div>

            {/* then I display the images in the urlsArray */}
                <div>
                {urls.map((url, i) => (
                  <img
                    key={i}
                    src={url || "http://via.placeholder.com/300"}
                    alt="firebase-image"
                    id="uploaded__images"
                  />
                ))}
                </div>

这工作正常但是当我上传图片时，即使我通过按 Ctrl + 单击多次上传它们，第一次尝试也不会上传，当我再次上传时，它会上传。

有没有办法让他们在每次用户上传时都上传？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

我建议您通过official resource page 了解格式和

如果您仍然遇到问题，请指出未按预期方式运行的特定库方法。您可以通过在源代码中添加调试信息或删除异步部分来简化它。

您可以查看此example link 以帮助您编写此功能。

【讨论】：