如何使用javascript存储然后从Parse检索图像

时间:2014-12-17 00:49:58

标签: javascript html angularjs parse-platform

正如标题所解释的那样,我正在尝试将图像保存到Parse,然后检索所述图像并将其显示为个人资料图片。现在,当我运行代码时,它没有做任何事情(显然,因为有些事情是不对的)。我已经进行了广泛的研究,并且一直接近但最终空手而归。任何人都可以为我提供一些方向,甚至是我的代码的某种修复方法吗?我知道我很亲密。谢谢!

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body ng-app="AuthApp">
  <div ng-hide="currentUser">
    <form ng-show="scenario == 'Sign up'">
      <h2>Sign up</h2>
      Picture: <input type="file" id="picture"/><br />
      Email: <input type="email" ng-model="user.email" /><br />
      Username: <input type="text" ng-model="user.username" /><br />
      Password: <input type="password" ng-model="user.password" /><br />
      First Name: <input type="text" ng-model="user.firstName" /><br />
      Last Name: <input type="text" ng-model="user.lastName" /><br />
      Mobile Number: <input type="text" ng-model="user.mobile" /><br />
      Date of Birth:<input type="text" ng-model="user.dob" /><br />
      <button ng-click="signUp(user)">Sign up</button>
      or <a href="#" ng-click='scenario="Log in"'>Log in</a>
    </form>

    <form ng-show="scenario == 'Log in'">
      <h2>Log in</h2>
      Username: <input type="text" ng-model="user.username" /><br />
      Password: <input type="password" ng-model="user.password" /><br />
      <button ng-click="logIn(user)">Log in</button>
      or <a href="#" ng-click='scenario="Sign up"'>Sign up</a>
    </form>
  </div>

  <div ng-show="currentUser">
    <h1>Welcome {{currentUser.get('username')}}</h1>
    {{currentUser.get('Picture')}}
    <p>{{currentUser.get('FirstName')}} {{currentUser.get('LastName')}}</p>
    <p>{{currentUser.get('Status')}}</p>
    <p>{{currentUser.get('DOB')}}</p>
    <p>Expires: {{currentUser.get('Expiry')}}</p>
    <button ng-click="logOut(user)">Log out</button>
  </div>
</body>
</html> 

使用Javascript:

Parse.initialize("x", "x");

    angular.module('AuthApp', []).run(['$rootScope', function($scope) {
      $scope.scenario = 'Sign up';
      $scope.currentUser = Parse.User.current();

    $scope.signUp = function(form) {
       var fileUploadControl = $("#picture")[0];
       if (fileUploadControl.files.length > 0) {
       var file = fileUploadControl.files[0];
       var name = file.name;

       var parseFile = new Parse.File(name, file);

       parseFile.save().then(function() {
       }, function(error){
        });

        var user = new Parse.User();
        user.set("Picture", parseFile);
        user.set("email", form.email);
        user.set("username", form.username);
        user.set("password", form.password);
        user.set("FirstName", form.firstName);
        user.set("LastName", form.lastName);
        user.set("Mobile", form.mobile);
        user.set("DOB", form.dob);
        user.set("Status", "New User");
        user.save();

             user.signUp(null, {
          success: function(user) {
            $scope.currentUser = user;
            $scope.$apply();     
    },
          error: function(user, error) {
            alert("Unable to sign up:  " + error.code + " " + error.message);
          }
        }); 
       }
    };

        $scope.logIn = function(form) {
        Parse.User.logIn(form.username, form.password, {
          success: function(user) {
            $scope.currentUser = user;
            $scope.$apply();
          },
          error: function(user, error) {
            alert("Unable to log in: " + error.code + " " + error.message);
          }
        });
      };

      $scope.logOut = function(form) {
        Parse.User.logOut();
        $scope.currentUser = null;
      };

    }]);

1 个答案:

答案 0 :(得分:0)

尝试移动保存用户的内容,使其位于parseFile.save后面的then语句中。在您尝试使用它之前,我相信您需要该文件才能完成保存。

Parse.initialize("x", "x");

angular.module('AuthApp', []).run(['$rootScope', function($scope) {
    $scope.scenario = 'Sign up';
    $scope.currentUser = Parse.User.current();

    $scope.signUp = function(form) {
        var fileUploadControl = $("#picture")[0];
        if (fileUploadControl.files.length > 0) {
            var file = fileUploadControl.files[0];
            var name = file.name;

            var parseFile = new Parse.File(name, file);

            parseFile.save().then(function() {
                var user = new Parse.User();
                user.set("Picture", parseFile);
                user.set("email", form.email);
                user.set("username", form.username);
                user.set("password", form.password);
                user.set("FirstName", form.firstName);
                user.set("LastName", form.lastName);
                user.set("Mobile", form.mobile);
                user.set("DOB", form.dob);
                user.set("Status", "New User");
                user.save();

                user.signUp(null, {
                    success: function(user) {
                        $scope.currentUser = user;
                        $scope.$apply();
                    },
                    error: function(user, error) {
                        alert("Unable to sign up:  " + error.code + " " + error.message);
                    }
                });
            }, 
            function(error) {


            });
        }
    };

    $scope.logIn = function(form) {
        Parse.User.logIn(form.username, form.password, {
            success: function(user) {
                $scope.currentUser = user;
                $scope.$apply();
            },
            error: function(user, error) {
                alert("Unable to log in: " + error.code + " " + error.message);
            }
        });
    };

    $scope.logOut = function(form) {
        Parse.User.logOut();
        $scope.currentUser = null;
    };

}]);