Question

我正在使用AngularJs和Firebase构建一个小型网络应用程序（类似博客文章）。我之前实现了addPost控制器并且运行良好。之后我想在表单中添加一个输入文件，该表单已经实现了使用 ng-file-upload指令在表单提交上将图像上传到firebase。作为一个新的角度我知道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

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

使用ng-file-upload指令将表单上传到表单上的firebase

1 个答案: