一次将多个图像上传到 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 语句添加到您的代码中，并检查是否正在调用函数。这有点帮助。

好的，所以我在这里所做的就是关注link。基本上，您聆听图像输入的更改并将这些文件推送到数组中。然后，当您提交表单时，您就可以将数组发送到 firebase。

下面的 sn-p 工作正常 :)

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>