如何使用reactjs在firebase v9云存储中上载多幅图像
如何使用reactjs在firebase v9云存储中上载多幅图像
提问于 2022-02-17 06:12:29
我刚开始学习如何用火基存储来应对js。我试图上传多个图片在火基地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>有人能指导我怎么解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2022-02-17 07:02:00
解出
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); }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71153265
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号