如何将Firebase存储添加到我的网络应用程序？ [英] How can I add Firebase Storage to my web app?
问题描述
我创建了一个使用angular firebase的小型博客应用程序，以便注册用户可以登录并发布文章和标题。我想利用firebase存储，以便用户可以随着文章和标题上传图像，用户也可以实时查看相关的图像（存储和检索功能）。
这是我的HTML：
< div flex-xs =100flex-md =80 layout =rowlayout-wrap>
< h3 flex =100>创建发布< / h3>
< md-input-container flex =40>
< label>标题< / label>
< input ng-model =article.titletype =text/>
< / md-input-container>
< md-input-container flex =100>
< label>文章< / label>
< / md-input-container>
< md-button class =md-raised md-primaryng-click =AddPost（）ng-disabled =！article.title ||！article.post>发布< / md - 按钮>
< / div>
这里是我的控制器：
<$ p $ （$ scope，$ firebase，$ firebaseObject，$ firebaseArray）中的函数， {
$ scope.AddPost = function（）{
var title = $ scope.article.title;
var post = $ scope.article.post;
var childRef = rootRef.child（Blog-One）;
var list = $ firebaseArray（childRef）;
list。$ add（{
title：title，$然后（函数（childRef）{
console.log（childRef）;
}，函数（错误）{
console.log （Error：，error）;
}）;
}
}]）
任何人都可以帮助我实现Firebase存储吗？谢谢提前。
< div flex-xs =100flex- md =80layout =rowlayout-wrap>
< h3 flex =100>创建发布< / h3>
< md-input-container flex =40>
< label>标题< / label>
< input ng-model =article.titletype =text/>
< / md-input-container>
< md-input-container flex =100>
< label>文章< / label>
< / md-input-container>
在您的html中添加这些标签
< progress value =0max =100id =uploader>< / progress>
< input type =filevalue =uploadid =fileButton>< br>
< md-button class =md-raised md-primaryng-click =AddPost（）ng-disabled =！article.title ||！article.post>发布和LT; / MD-按钮>
在您的控制器
var uploader = document.getElementById（'uploader'），
imageUrl，
fileButton = document.getElementById（' fileButton'）;
fileButton.addEventListener（'change'，function（e）{
var file = e.target.files [0];
var storageRef = firebase.storage（）。ref（'firebase'）。child（file.name）;
var task = storageRef.put（file）;
task.on（'state_changed'，
函数进度（快照）{
var percentage =（snapshot.bytesTransferred / snapshot.totalBytes）* 100;
uploader.value =百分比;
if（percentage == 100）{
storageRef.getDownloadURL（）。then（function（url）{
在这里，您将获得下载url
imageUrl = url;
} ）;
$ b $）}。catch（function（error）{
//呃 - 哦，发生错误！
}）;
}
}，
函数错误（err）{
}，
函数完成（）{
}
）;
}）;
因此，您可以允许所有用户使用图片发布文章。但保留一件事等到图片上传到存储中，然后显示发布文章按钮。要做到这一点，等到进度条得到100％，然后显示发布文章按钮
I have created a small blog app using angular firebase so that registered user can login and post a blog with article and title. I want to make use of firebase storage so that user can upload images along with the article and title and user can also view the images related to post(store and retrieve feature) in real time.
Here is my html :
<div flex-xs="100" flex-md="80" layout="row" layout-wrap >
<h3 flex="100">Create Post</h3>
<md-input-container flex="40" >
<label>Title</label>
<input ng-model="article.title" type="text" />
</md-input-container>
<md-input-container flex="100" >
<label>Article</label>
<textarea ng-model="article.post" ></textarea>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="AddPost()" ng-disabled="!article.title || !article.post">Publish</md-button>
</div>
Here is my controller :
.controller('AddPostCtrl', ['$scope','$firebase','$firebaseObject', '$firebaseArray', function($scope,$firebase,$firebaseObject,$firebaseArray) {
$scope.AddPost = function() {
var title = $scope.article.title;
var post = $scope.article.post;
var childRef = rootRef.child("Blog-One");
var list = $firebaseArray(childRef);
list.$add({
title: title,
post: post,
}).then(function(childRef) {
console.log(childRef);
}, function(error) {
console.log("Error:", error);
});
}
}])
Can anyone help me with how to implement firebase storage, please? Thanks in advance.
<div flex-xs="100" flex-md="80" layout="row" layout-wrap >
<h3 flex="100">Create Post</h3>
<md-input-container flex="40" >
<label>Title</label>
<input ng-model="article.title" type="text" />
</md-input-container>
<md-input-container flex="100" >
<label>Article</label>
<textarea ng-model="article.post" ></textarea>
</md-input-container>
Add these tags in your html
<progress value="0" max="100" id="uploader"></progress>
<input type="file" value="upload" id="fileButton"><br>
<md-button class="md-raised md-primary" ng-click="AddPost()" ng-disabled="!article.title || !article.post">Publish</md-button>
In your controller
var uploader=document.getElementById('uploader'),
imageUrl,
fileButton=document.getElementById('fileButton');
fileButton.addEventListener('change', function(e) {
var file=e.target.files[0];
var storageRef=firebase.storage().ref('firebase').child(file.name);
var task=storageRef.put(file);
task.on('state_changed',
function progress(snapshot){
var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
uploader.value=percentage;
if (percentage==100){
storageRef.getDownloadURL().then(function(url) {
Here you will get download url
imageUrl=url;
});
}).catch(function(error) {
// Uh-oh, an error occurred!
});
}
},
function error(err){
},
function complete(){
}
);
});
So you can allow all the users to post the article with an image. But keep one thing wait until the image uploaded in the storage, and then show the publish article button. To do that wait until the progress bar to get 100% then show the publish article button
这篇关于如何将Firebase存储添加到我的网络应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
