Javascript 将图像上载到firebase存储时,如何制作进度条?
我想让用户知道上传了多少文件,这样他就不会在上传过程中退出。有人能帮我在vue js中制作进度条吗 我使用这个firebase代码来显示百分比,我使用了v-model和p标记来显示百分比,但没有任何效果 方法:{Javascript 将图像上载到firebase存储时,如何制作进度条?,javascript,firebase,vue.js,firebase-storage,Javascript,Firebase,Vue.js,Firebase Storage,我想让用户知道上传了多少文件,这样他就不会在上传过程中退出。有人能帮我在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 = "us
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
{{this.progress}}%
解析此
以将进度
作为自身
运行从
this.progress=百分比代码>,这是功能进展的方法
<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);
}