Question

我正在尝试将图片从我的浏览器直接上传到Amazon S3，但是没有定义AWS的错误：

   public/modules/users/controllers/settings.client.controller.js
 16 |      var bucket = new AWS.S3({ 
                            ^ 'AWS' is not defined.
 18 |          credentials: new AWS.Credentials($scope.creds.access_key, $scope.creds.secret_key)
                                ^ 'AWS' is not defined.

以下是我的代码：

'use strict';

    angular.module('users').controller('SettingsController', ['$scope', '$http', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication) {
    $scope.user = Authentication.user;

        $scope.profpic = '';
        $scope.creds = {
            bucket: 'bucket_name',
            access_key: '',
            secret_key: ''
        };

        $scope.upload = function() {
  // Configure The S3 Object 
  var bucket = new AWS.S3({ 
    region : 'us-east-1',
    credentials: new AWS.Credentials($scope.creds.access_key, $scope.creds.secret_key)
  });

  if($scope.file) {
    var params = { Bucket: $scope.creds.bucket, Key: $scope.file.name, ContentType: $scope.file.type, Body: $scope.file, ServerSideEncryption: 'AES256' };

    bucket.putObject(params, function(err, data) {
        if(err) {
        // There Was An Error With Your S3 Config
        alert(err.message);
        return false;
    }
    else {
        // Success!
        alert('Upload Done');
    }
})
    .on('httpUploadProgress',function(progress) {
          // Log Progress Information
          console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
      });
  }
  else {
    // No File Selected
    alert('No File Selected');
}
};

    // If user is not signed in then redirect back home
    if (!$scope.user) $location.path('/');

    // Check if there are additional accounts 
    $scope.hasConnectedAdditionalSocialAccounts = function(provider) {
        for (var i in $scope.user.additionalProvidersData) {
            return true;
        }

        return false;
    };

    // Check if provider is already in use with current user
    $scope.isConnectedSocialAccount = function(provider) {
        return $scope.user.provider === provider || ($scope.user.additionalProvidersData && $scope.user.additionalProvidersData[provider]);
    };

    // Remove a user social account
    $scope.removeUserSocialAccount = function(provider) {
        $scope.success = $scope.error = null;

        $http.delete('/users/accounts', {
            params: {
                provider: provider
            }
        }).success(function(response) {
            // If successful show success message and clear form
            $scope.success = true;
            $scope.user = Authentication.user = response;
        }).error(function(response) {
            $scope.error = response.message;
        });
    };

    // Update a user profile
    $scope.updateUserProfile = function(isValid) {
        if (isValid) {
            $scope.success = $scope.error = null;
            var user = new Users($scope.user);

            user.$update(function(response) {
                $scope.success = true;
                Authentication.user = response;
            }, function(response) {
                $scope.error = response.data.message;
            });
        } else {
            $scope.submitted = true;
        }
    };

    // Change user password
    $scope.changeUserPassword = function() {
        $scope.success = $scope.error = null;

        $http.post('/users/password', $scope.passwordDetails).success(function(response) {
            // If successful show success message and clear form
            $scope.success = true;
            $scope.passwordDetails = null;
        }).error(function(response) {
            $scope.error = response.message;
        });
    };
}
    ])
    .directive('fileread', [function(){
        return {
            scope: {
                fileread: '='
            },
            link: function(scope, element, attributes) {
                element.bind('change', function(changeEvent) {
                    var reader = new FileReader();
                    reader.onload = function(loadEvent) {
                        scope.$apply(function() {
                    scope.fileread = loadEvent.target.result;
                        });
                    };
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            }
         };
    }]);

不确定是什么问题，因为这是我第一次使用Angular＆amp;处理wi / S3。

Answer 1

您确定添加了AWS脚本吗？

从这看： https://github.com/aws/aws-sdk-js

我相信您可能已在HTML文件中忘记了这一点：

<head>
    ....
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.17.min.js"></script>
    ....
</head>

或者如果它存储在本地：

<head>
    ....
    <script src="path/to/file/aws-sdk-2.1.17.min.js"></script>
    ....
</head>

或类似的东西

如果你在后端使用aws＆amp;一个节点服务器，然后你需要使用这样需要它（但是看看你的代码看起来你在前端做它）：

var AWS = require('aws-sdk');

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-intro.html

使用AngularJS Amazon S3直接从浏览器上传图像

1 个答案: