在 React.js 中使用 Dropzone 時如何將圖像上傳到 Firebase 存儲並獲取圖像的下載 URL

Question

我的反應網站中有一個<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

更新文件刪除 function

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]);
            })
          }
        )
      
    })