javascript - 将图像上传到 Firebase 存储时如何制作进度条?
问题描述
我想取得进展,向用户展示上传了多少文件,这样他就不会在上传过程中退出 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">
解决方案
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
推荐阅读
- php - 如何在零停机时间的水平扩展设置中使用 Laravel 迁移?
- javascript - 列表打开或关闭时如何添加加减号?
- python - Python Tkinter csv 读取文件到 Entry
- regex - 无法在熊猫中使用正则表达式进行匹配
- php - PHP重定向加载当前页面
- elasticsearch - 当一个主节点关闭且另一个主节点的 ID 不正确时,拯救我的弹性搜索集群
- javascript - 使用php加密,使用js解密
- flutter - Flutter:如何检查 Widget 是否为滚动小部件
- c# - 在运行时从类的实例创建 xsd 架构
- c# - 降低质量后原始位图的低质量位图副本变大