使用 ng-file-upload 指令在表单提交时将图像上传到 firebase

Question

我正在使用 AngularJs 和 Firebase 构建一个小型网络应用程序（类似博客 post）。我之前实现了 addPost 控制器并且效果很好。在我想在表单中添加一个输入文件之后，该表单已经实现了使用 ng-file-upload 指令 将图像上传到表单提交时的 firebase。作为 angular 的新成员，我知道 firebase 可以将图像保存为 base64，但我不知道如何让它工作。也许有人会说这是重复的问题，但相信我，我在这里到处搜索我找不到答案。
这是我的表单文件：

<div class="container" ng-controller="AddPostCtrl">

        <form class="form-horizontal" ng-submit="AddPost(files)">
            <fieldset>

                <!-- Form Name -->
                <legend>Create Post</legend>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtTitle">Title</label>
                    <div class="col-md-4">
                        <input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtPost">Post</label>
                    <div class="col-md-4">
                        <textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost"></textarea>
                    </div>
                </div>

                <!-- Images -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="pictures">Add Pictures</label>
                    <div class="col-md-4">
                        <input id="pictures" type="file" ngf-select ng-model="files"  name="file"    
                          accept="image/*" ngf-max-size="2MB" ngf-multiple="true" ngf-keep="true" ngf-keep-distinct="true" class="btn btn-primary"/>
                <!-- Show image thumb and remove option -->
                        <span ng-repeat="file in files">
                           <img ngf-thumbnail="!file.$error && file" class="thumb"> <button class="btn btn-danger" ng-click="file = null" ng-show="file">Remove</button>
                        </span>
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="singlebutton"></label>
                    <div class="col-md-4">
                        <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                    </div>
                </div>

            </fieldset>
        </form>


    </div>

这是我的控制器：

angular.module('myApp.addPost', ['ngRoute'])

.controller('AddPostCtrl', ['$scope','CommonProp','$firebase','$location','Upload','$timeout', function($scope,CommonProp,$firebase,$location,Upload,$timeout) {
    if(!CommonProp.getUser()){
    $location.path('/main');
    }


    /***** Add data to firebase *****/
    $scope.AddPost = function(files) {
            var fb = new Firebase("https://hotelboard.firebaseio.com/Articles/");

            var title = $scope.article.title;
            var post  = $scope.article.post;
            var user  = CommonProp.getUser();
            var images =     Upload.base64DataUrl(files).then(function(base64Urls){
            fb.push({
                title:     title,
                post:      post,
                emailId:   user,
                images : base64Urls,
                '.priority': user

            },function(error) {
                if (error) {
                    console.log("Error:",error);
                } else {
                console.log("Post set successfully!");
                console.log(images);
                $location.path('/home');
                $scope.$apply();

            }

        });
      });
    }

}]);

这是我的 GitHub 完整项目文件

https://github.com/SaidThaher/HotelApp

如果我在这个问题上得到帮助，关于结果的问题会更多。请帮忙

更新： @danialfarid 更新了指令并成就了我的一天:)

升级到 8.0.6 并将您的 fb 推送移至此处：

Upload.base64DataUrl(files).then(function(base64Urls) {
  fb.push({...
            images : base64Urls,
        },...
});

我也更新了代码。

Answer 1

把你的脸书推送移到这里： Upload.base64DataUrl(files).then(function(base64Urls) { fb.push({... images : base64Urls, },... }); Upload.base64DataUrl 会将文件转换为 base64 数据 url，然后可以将其添加到 json 以发送到服务器。

使用 ng-file-upload 指令在表单提交时将图像上传到 firebase

Upload images to firebase on form submit using ng-file-upload directive

angularjs

firebase

angularfire

ng-file-upload