如何将 Firebase 存储添加到我的网络应用？

Question

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

这是我的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>

这是我的控制器：

.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);
    });

}
}])

谁能帮我解决如何实施 Firebase 存储？提前致谢。

Answer 1

<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> 

在你的 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>

在你的控制器中

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) {

在这里你会得到下载地址

imageUrl=url;
});

}).catch(function(error) {
// Uh-oh, an error occurred!
});
        }
        },
        function error(err){

        },
        function complete(){

        }

    );
 });

因此，您可以允许所有用户发布带有图片的文章。但是保留一件事，等到图片上传到存储中，然后显示发布文章按钮。为此，请等到进度条达到 100%，然后显示发布文章按钮