如何将 Firebase 存储添加到我的网络应用程序? [英] How can I add Firebase Storage to my web app?

问题描述

我使用 angular firebase 创建了一个小型博客应用程序，以便注册用户可以登录并发布包含文章和标题的博客.我想利用 firebase 存储，以便用户可以上传图片以及文章和标题，用户还可以实时查看与帖子(存储和检索功能)相关的图片.

这是我的 html:

<div flex-xs="100" flex-md="80" layout="row" layout-wrap ><h3 flex="100">创建帖子</h3><md-input-container flex="40" ><label>标题</label><input ng-model="article.title" type="text"/></md-input-container><md-input-container flex="100" ><label>文章</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">发布</md-button>

这是我的控制器:

.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);列表.$add({标题:标题，发帖:发帖，}).then(function(childRef) {控制台日志(childRef)；}, 函数(错误){console.log("错误:", 错误);});}}])

有人能帮我实现firebase存储吗?提前致谢.

解决方案

在你的 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">发布</md-button>

在你的控制器中

var uploader=document.getElementById('uploader'),图片网址，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百分比=(快照.bytesTransferred/快照.totalBytes)* 100;上传者.值=百分比；如果(百分比== 100){storageRef.getDownloadURL().then(function(url) {

在这里你会得到下载地址

imageUrl=url;});}).catch(函数(错误){//呃-哦，发生错误！});}},函数错误(错误){},功能完成(){});});

因此您可以允许所有用户发布带有图片的文章.但是保留一件事，等到图像上传到存储中，然后显示发布文章按钮.为此，请等待进度条达到 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屋！