在 React.js 中使用 Dropzone 时如何将图像上传到 Firebase 存储并获取图像的下载 URL

Question

我的 React 网站中有一个 <Dropzone/> 组件，允许我的用户通过单击或拖放来上传多张图片。

当我上传图像时，它们被保存在我的 firebase 存储中，但每个单独图像的 URL 未设置，我收到一个 firebase 错误，内容为：

"Uncaught (in promise) FirebaseError: Firebase Storage: Object 'propertyImages/Picture1.png+4b80d-6dd0-4b40-cadc-8e7845677bbd' does not exist. (storage/object-not-found)
{
  "error": {
    "code": 404,
    "message": "Not Found."
  }
}"

我不知道为什么它没有为每个图像设置 url，我相信这是因为它覆盖了以前下载的 url。如何让 Dropzone 正常工作？

我做错了什么？

这是我的代码：

  import Dropzone, {useDropzone} from "react-dropzone"

  const [urls,setUrls] = useState([]);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDropAccepted: onFilesDrop, maxFiles: 5 });




  function onFilesDrop(files) {
    files.map((item, index) => {
        let uploadTask = storage.ref(`propertyImages/${item.name}+${uuid()}`).put(item);
        uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
            setUrls(prevState => {
                return [...prevState, downloadURL]
            })
        })
    })
}
return (
  <CardTitle className="mb-3 h4">Property Images (MAX IMAGES 5)</CardTitle>
                    <div className="dropzone" >
                    <Dropzone
                        onDrop={acceptedFiles =>
                          onFilesDrop(acceptedFiles)
                        }
                      >
                        {({ getRootProps, getInputProps }) => (
                          <div>
                            <div
                              className="dz-message needsclick"
                              {...getRootProps()}
                            >
                              <input {...getInputProps()} />
                              <div className="dz-message needsclick">
                                <div className="mb-3">
                                  <i className="display-4 text-muted bx bxs-cloud-upload" />
                                </div>
                                <h4>Drop files here or click to upload.</h4>
                              </div>
                            </div>
                          </div>
                        )}
                      </Dropzone>
                      
)

Answer 1

更新 onFilesDrop 函数

function onFilesDrop(files) {
    files.map((item, index) => {
        let uploadTask = storage.ref(`propertyImages/${item.name}+${uuid()}`).put(item);
        console.log(uploadTask);
        uploadTask.on(
          "state_changed",
          snapshot => {
          },
          error => {
            console.log(error);
          },
          async () => {
            await storage
            .ref("images")
            .child(item.name)
            .getDownloadURL()
            .then(urls => {
              console.log(urls) //log url if you want
              setUrls((P) => [...P, urls]);
            })
          }
        )
      
    })

在 React.js 中使用 Dropzone 时如何将图像上传到 Firebase 存储并获取图像的下载 URL

How to Upload Images to Firebase Storage and Get Image's Download URL's When Using Dropzone in React.js

javascript

firebase

dropzone.js

reactjs

firebase-storage