时间戳

首页 > 解决方案 > 将图像上传到 Firebase 商店后设置 Vuetify 循环进度条值

vue.js - 将图像上传到 Firebase 商店后设置 Vuetify 循环进度条值

问题描述

我试图在 Firebase 商店图片上传成功后显示进度条。我可以上传图片，但无法将响应状态与进度条同步。这是我正在尝试的代码片段，您能否指出错误。谢谢

<template>
   <v-progress-circular
     :rotate="360"
     :size="100"
     :width="15"
     :value="value"
     color="teal"
   >
    {‌{ value }}
   </v-progress-circular>
</template>

export default {
    data: () => ({

    interval: {},
    value: 0,
    percent: 0,
}

我正在尝试插入Vuetify 循环进度小部件。在UploadTask.On承诺的图像上传期间，即使我将值设置如下，值字段也不会随着当前进度更新。

uploadTask.on(
    "state_changed",
    function(snapshot) {
      this.percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
      this.value = this.percent

标签： vue.js

解决方案

我使用 Vue 的 Emit Bus Feature 解决了这个问题

uploadTask.on(
        "state_changed",
        function(snapshot) {
          this.percent = snapshot.bytesTransferred / snapshot.totalBytes * 100;
          this.percent = Number(this.percent.toFixed(3).slice(0, -1));
          EventBus.$emit("upload-progress", this.percent);
          console.log("Upload is " + this.percent + "% done");
        },
        function error(err) {},
        function complete() {
          console.log("Upload finished!!!!");
        }
      );
    },

和

mounted() {
    this.$validator.localize("en", this.dictionary);
    this.interval = setInterval(() => {
      if (this.value === 100) {
        return (this.value = 100);
      }
      EventBus.$on("upload-progress", percent => {
        this.value = percent;
      });
    }, 1000);
  },

推荐阅读