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

How to store and then retrieve image from Parse using javascript

本文关键字：Parse 检索图像然后何使用 javascript 存储更新时间：2023-09-26

正如标题所解释的那样，我正在尝试将图像保存到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;
      };
    }]);

尝试移动保存用户的内容，使其位于 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;
    };
}]);