上传图片直接从浏览器中使用AngularJS亚马逊S3亚马逊、上传图片、器中、直接

2023-09-11 10:05:44 作者:梦想是嫁给先生

我想从我的浏览器到Amazon S3直接上传图片,但得到的AWS没有定义的错误:

I am trying to upload images from my browser to Amazon S3 directly, but getting the error of AWS not being defined:

   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.

下面是我的code:

Below is my code:

'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]);
                });
            }
         };
    }]);

不知道日eproblem是,因为这是我第一次用角和放大器;处理无线/ S3。

Not sure what th eproblem is, as this is my very first time using Angular & dealing wi/ S3.

推荐答案

您确定您所添加的AWS脚本。

Are you sure you added the AWS script.

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

我相信你可能已经在你的HTML文件中忘记这一点:

I believe you may have forgot this in your HTML file:

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

或者,如果本地存储:

Or if it is stored locally:

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

或者类似的东西。

Or something similar

如果您使用的是在后台和放大器AWS;节点服务器,那么你就需要使用它需要像这样的(但是看你的code,它看起来像你这样做在前端):

If you are using aws in the backend & a Node server then you'll need use require it like this (however looking at your code it looks like you are doing it in the frontend):

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

http://docs.aws.amazon.com/AWSJavaScriptSDK/导游/节点intro.html