一次將多個圖像上傳到 Firebase

Question

我想一次將多張圖片上傳到我的 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>

Answer 1

您可以嘗試將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>