![](/img/trans.png)
[英]Uploading multiple photos at once in firebase storage and storing their URLs in a firestore document (firebase version 9)
[英]Uploading Multiple Images to Firebase at Once
我想一次将多张图片上传到我的 firebase 数据库。 我也需要 HTML。 这是我通过研究发现的,但我认为由于没有正确的 HTML (也许)它不起作用。
fileButton.addEventListener('change', function(e){ //Get files for (var i = 0; i < e.target.files.length; i++) { var imageFile = e.target.files[i]; uploadImageAsPromise(imageFile); } }); //Handle waiting to upload each file using promise function uploadImageAsPromise (imageFile) { return new Promise(function (resolve, reject) { var storageRef = firebase.storage().ref(fullDirectory+"/"+imageFile.name); //Upload file var task = storageRef.put(imageFile); //Update progress bar task.on('state_changed', function progress(snapshot){ var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100; uploader.value = percentage; }, function error(err){ }, function complete(){ var downloadURL = task.snapshot.downloadURL; } ); }); }
<button type="button" id="fileButton">Upload</button> <input id="imageFile" type="file" accept="image/*" multiple>
您可以尝试将console.log
语句添加到您的代码中,并检查是否正在调用函数。 这有点帮助。
好的,所以我在这里所做的就是关注这个链接。 基本上,您聆听图像输入的更改并将这些文件推送到数组中。 然后,当您提交表单时,您已经准备好将数组发送到 firebase。
下面的代码片段工作正常:)
const fileCatcher = document.getElementById("fileCatcher"); const fileInput = document.getElementById("fileInput"); let fileList = []; fileInput.addEventListener('change', function(e){ console.log('Input has changed'); fileList = []; //Reset the list const files = fileInput.files; for (var i = 0; i < files.length; i++) { fileList.push(files[i]); } }); fileCatcher.addEventListener('submit', function(e){ e.preventDefault(); //Block the form from reloading the page console.log(fileList); const files = fileInput.files.list; for (var i = 0; i < fileList.length; i++) { var imageFile = fileList[i]; //uploadImageAsPromise(imageFile); } });
<form id = "fileCatcher"> <button type="submit">Upload</button> <input id="fileInput" type="file" accept="image/*" multiple> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.