上传到Firebase存储时是否有可能显示多个进度条(每个上传文件一个)?

时间:2019-05-08 10:05:13

标签: javascript firebase web firebase-storage

我正在尝试将少量文件上传到Firebase存储,并为每个上传文件显示单独的进度条,但是如果进入progress()和complete()函数,则无法传递任何当前正在上传的文件:-(

// DIV container for progress bars
const divProgressBarContainer = $('#divProgressBarContainer')

// File upload form input
const fileUpload = $('#fileUpload')

// Starting upload
fileUpload.on('change', function(e){

    // Get File
    const files = e.target.files

    // Bars array
    var bars = []

    for (var i = 0, f; (f = files[i]); i++) {

        // Adding some progress bars objects
        bars.push({
            progressBarId   : 'progress_' + i,
            progressBarText : beautifyFileName(f.name) + ' — 0%'
        })

        // Create a storage ref
        var storageRef = firebase.storage().ref('json/' + f.name)

        // Upload file
        var task = storageRef.put(f)

        // Update progress bar on changes
        task.on('state_changed', function progress(snapshot){
            let percentage = snapshot.bytesTransferred /                                             
            snapshot.totalBytes * 100
            let name = beautifyFileName(snapshot.ref.name)
            let id = '#progress_' + i
            // Bootstrap 4 progress bar
            $(id).width(percentage + '%')
            $(id).html(name + ' — ' + percentage + '%')
        },

            function error(err){},
            function complete(){}
        )
    }

    // Adding progress bars to HTML
    divProgressBarContainer.append(`${
    bars.map((bar) =>
        `<div class="progress mb-3"><div class="progress-bar progress-                                                               
        bar-striped progress-bar-animated" role="progressbar" aria-  
        valuenow="0" aria-valuemin="0" aria-valuemax="100" 
        style="width: 0%"    
        id="${bar.progressBarId}">${bar.progressBarText}</div></div>`
    ).join('')
} `
    )
})

// Extracting file name and UPPERCASE it
function beautifyFileName(string){
    return string.split('.').slice(0, -1).join('.').toUpperCase()
}

我想为每个上载文件获得单独的进度,或者为所有文件至少获得一个进度条。

0 个答案:

没有答案