Firebase Firestorage Upload Process Jump from 0 to 100

问题

I am implementing a file upload using Angular and Firebase. When I am uploading an image I want to show a smooth transition from 0 to 100. But right now I am using firebase's builtin function and when the process starts it is showing 0 then suddenly jumping to 100.

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

uploadTask.on('state_changed', function(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

  this.selectedImageUrl = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;  //this.selectedImageUrl is my custom variable which I wan to show smooth Animation
  console.log('Upload is ' + this.selectedImageUrl + '% done');


}, function(error) {
  // Handle unsuccessful uploads
}, function() {

  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
});

回答1:

The behavior you're observing can't be changed.

Internally, the SDK uses a large buffer to send the contents of the file, and the progress only updates after an entire buffer is sent. If you're sending a small file, it's very possible that a single buffer contains the entire file. There's nothing you can do to change the size of the internal buffers, so you'll have to accept the way that it works today.

回答2:

You are dividing snapshot.bytesTransferred / snapshot.totalBytes which evaluates to 0 and then multiplying it with 100 give u zero, instead multiply it with 100 first and then divide it by total size

use the following formula

this.selectedImageUrl = (snapshot.bytesTransferred *100) / snapshot.totalBytes; 

来源：https://stackoverflow.com/questions/59471684/firebase-firestorage-upload-process-jump-from-0-to-100