一次将多个图像上传到 Firebase

Posted 2023-03-22

【中文标题】一次将多个图像上传到 Firebase

【英文标题】：Uploading Multiple Images to Firebase at Once

【发布时间】：2021-04-07 00:38:11

【问题描述】：

我想一次将多张图片上传到我的 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>

【问题讨论】：

你用的是哪个框架？？

【参考方案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>

【讨论】：

嗨，这段代码似乎给了我 2 个错误 - 'Uncaught TypeError: Cannot read property 'addEventListener' of null' & 'failed to load resource: 服务器响应状态为 404（不是成立）'。这可能是什么问题？

嗯，您需要确保 html 中元素的 id 与 document.getElementById() 调用的元素完全相同。这可能就是发生第一个错误的原因。关于第二个错误，什么时候发生？

我应该从我的原始代码中得到什么？现在我只是尝试应用您的 sn-p 而不使用旧代码中的任何内容。

代码现在似乎可以工作了。我确实将多张图片上传到数据库。但是，我似乎有这个错误 - Uncaught (in promise) ReferenceError: uploader is not defined at progress (tryhard.php:62) at Me.t.next (task.ts:84) at async.ts:27跨度>