gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:36:14 27 4
gpt4 key购买 nike

我的 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>

)

最佳答案

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

})

关于javascript - 在 React.js 中使用 Dropzone 时如何将图像上传到 Firebase 存储并获取图像的下载 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70880777/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com