繁体   English   中英

一次将多个图像上传到 Firebase

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM