1

AngularJs と Firebase を使用して、小さな Web アプリ (ブログ投稿も同様) を構築しています。以前に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,
        },...
});

コードも更新しました。

4

1 に答える 1

2

fb プッシュをここに移動します。 Upload.base64DataUrl(files).then(function(base64Urls) { fb.push({... images : base64Urls, },... }); Upload.base64DataUrl はファイルを base64 データ URL に変換し、それを json に追加してサーバーに送信できます。

于 2015-10-01T17:42:23.887 に答える