将图像上传到 Firebase 存储时如何制作进度条？

Posted 2023-02-22

【中文标题】将图像上传到 Firebase 存储时如何制作进度条？

【英文标题】：how can i make a progress bar when i upload a image to my firebase storage?

【发布时间】：2019-09-14 03:31:44

【问题描述】：

我想取得进展，向用户展示上传了多少文件，这样他就不会在上传过程中退出 n 任何人都可以帮助我如何在 vue js 中制作进度条

我正在使用这个 firebase 代码来显示百分比我使用 v-model 和 p 标签来显示百分比，但没有任何效果

方法：

uploadfiles(e) 
  var storage = firebase.storage();
  var user = firebase.auth().currentUser;
  var file = e.target.files[0];
  var path = "users/" + user.uid + "/attachments/" + Date.now() + ".jpg";
  var storageRef = storage.ref(path);
  var task = storageRef.put(file);
      task.on('state_changed');
    function progress (self, snapshot)
      var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
        console.log('this is image =',percentage);
          self.progress = percentage;
           console.log(progress);
    

    task.then(snapshot => 
      console.log("image uploaded successfully");
      //saveMessageInDatabase(newmessagedata);
      return task.snapshot.ref.getDownloadURL();
    )
    .then(url => 
      console.log("download url of image", url);
      this.username.image = url;
      console.log(this.username.image);
    )
    .catch(error => 
      // hideMessageDialog();
      console.log("image uploaded error");
    );

html

  <p>this.progress%</p>

   <progress max="100"  :style="width: progress+'%'" value="0"> 
 </progress> 

<div class="progress-bar" role="progressbar" v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100" :style="width: this.progress+'%'"></div>

    <input id="pic" type="file"  @change="uploadfiles">

【参考方案1】：

  function progress (self, snapshot)
      var percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
      console.log('this is image =',percentage);
      self.progress = percentage ;
    console.log(progress);
  

解析this 以将progress 用作self。 从this.progress = percentage ;，this 是function progress 的意思。