Question

我使用MEAN堆栈（Mongo-Express-Angualr-Node）构建开源CRM。在其中一种表格中，我上传了订单资产（注释，图片，图纸或w / e）。

我认为在浏览器中执行此操作会更容易，因此我尝试将浏览器sdk用于AWS。我曾经遇到过这个错误，并认为这是一个COORS问题。添加了一个COORS文件（参见下面的COORS文件），一切都很好。

我尝试添加一些订单并根据帐户名称分隔资产。我收到以下错误。

COORS：

<?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedMethod>PUT</AllowedMethod>
      <AllowedMethod>POST</AllowedMethod>
      <AllowedMethod>DELETE</AllowedMethod>
      <AllowedHeader>*</AllowedHeader>
    </CORSRule>
 </CORSConfiguration>

代码：

    $scope.account.Business_Name = 'Bobs Burgers';

    $scope.creds = {
      bucket: 'someBucket',
      access_key: '###',
      secret_key: '###'
    }

    AWS.config.update({ accessKeyId: $scope.creds.access_key, secretAccessKey: $scope.creds.secret_key });
    AWS.config.region = 'us-east-1';

    var params = {
      Bucket: $scope.creds.bucket+'/Insertion_order_assets/'+$scope.account.Business_Name,
      ACL: 'public-read ',
      GrantFullControl: 'Everyone'
    };

    var s3 = new AWS.S3({ params: { Bucket: $scope.creds.bucket, ACL: "public-read" } });
    s3.createBucket(params, function(err, data) {
      console.log(err, data);
    });

返回错误：

 XMLHttpRequest cannot load https://s3.amazonaws.com/someBucket%2FInsertion_order_assets%2FBobs%20Burgers. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Answer 1

我的问题是我用文件夹混淆了文件夹。 S3中的文件夹只是一个空对象。 S3是一个平面文件系统，所以不知道目录或文件夹。

在文件系统中，我们将/var/www/index.asp视为文件“index.asp”，位于“www”目录中，父目录为“var”

VAR

↪www

↪index.asp

在S3中，它更像是{“var”：{“www”：“index.asp”}}的JS对象，但是用正斜杠分隔。

即。 /var/www/index.asp是完整的对象名称。

S3中的“文件夹”实际上是一个空白对象（即/ var / www /）。

所以在我上面的例子中它不起作用。我最终做的是在我的桶中创建一个文件，其长名称由正斜杠分隔。

    var new_file_name = 'insertion_order_assets/'+$scope.account.Business_Name.split(' ').join('_').toLowerCase()+'/'+$scope.io.file.name.split(' ').join('_').toLowerCase();
    AWS.config.update({ accessKeyId: $scope.creds.access_key, secretAccessKey: $scope.creds.secret_key });
    AWS.config.region = 'us-east-1';
    var bucket = new AWS.S3({ params: { Bucket: $scope.creds.bucket }});
    var params = {
      Key: new_file_name,
      ContentType: $scope.io.file.type,
      Body: $scope.io.file,
      ACL: 'public-read'
    };
    bucket.putObject(params, function (err, data) {
      $scope.io.Attchment_URL = 'https://###.s3-us-west-1.amazonaws.com/' + new_file_name;
      $scope.io.$save(function(){
        $location.path("/insertionOrders/all");
      });
    }).on('httpUploadProgress',function(progress) {
      console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
    });

创建了我想要的层次结构。

Answer 2

未经测试，但通过阅读doc，我可以看到一些语法错误：

var s3 = new AWS.S3({ // Don't use { params: {} }
});

s3.createBucket({
  Bucket: $scope.creds.bucket,
  ACL: "public-read-write", // changed from public-read
  CreateBucketConfiguration: {
    LocationConstraint: 'us-west-1'
  }
});

如何使用js浏览器SDK以编程方式在s3中创建文件夹

2 个答案: