我如何获得使用 firebase 上传的每个文件的进度？

Question

我有这段代码可以将文件上传到 firebase 数据库

export const upload = (
  name
) => {
  return new Promise((resolve, reject) => {
    try {
      const ref = firebaseApp.storage()
      ref
        .put(file)
        .then(snapshot => {

如何获取每个文件的进度？因为我需要知道在 progressBar

中显示的进度

Answer 1

每次调用 storageRef.put(file) 都会上传一个文件。如 monitoring upload progress 上的文档所示，您可以通过以下方式跟踪进度：

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', 
  (snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);

因此，在您的情况下，您捕获了 put returns:

的任务

  const storageRef = firebaseApp.storage().ref(`${name}`)
  const task = storageRef.put(file)

然后向其添加 on('stage_changed' 侦听器，就像文档中的代码一样。

on('state_changed') 的第三个回调在上传完成时被调用，因此您可以在那里执行与当前 then() 回调相同的操作。

我如何获得使用 firebase 上传的每个文件的进度？

How can i get the progress each of the files upload with firebase?

javascript

firebase

progress-bar

firebase-storage