Firebase Firestorage上传过程从0跳到100

Question

我正在使用Angular和Firebase实现文件上传。当我上传图像时，我想显示从0到100的平滑过渡。但是现在我正在使用firebase的内置函数，当进程启动时它显示0，然后突然跳到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);
  });
});

Answer 1

您观察到的行为无法更改。

[内部，SDK使用大缓冲区发送文件的内容，并且进度仅在发送完整个缓冲区后才会更新。如果您要发送一个小文件，则单个缓冲区很可能包含整个文件。您无法更改内部缓冲区的大小，因此您必须接受它今天的工作方式。

Answer 2

[您将snapshot.bytesTransferred / snapshot.totalBytes除以0，然后将其乘以100得到零，而不是先将其乘以100再除以总大小]]

使用以下公式

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