如何将图像上传到 s3 存储桶答案

【问题标题】：how to upload image to s3 bucket如何将图像上传到 s3 存储桶
【发布时间】：2018-03-11 03:01:36
【问题描述】：

我正在尝试将名为“quotes.png”的图像上传到我的 Ionic 2 应用程序中的 s3 存储桶（没有使用节点），但它显示“网络故障”。

这就是我的代码的样子（省略了敏感信息）：

import AWS from 'aws-sdk';
import S3 from 'aws-sdk/clients/s3';

AWS.config.update({ accessKeyId: 'myaccesskeyid', secretAccessKey: 'mysecretaccesskey' })
var s3 = new AWS.S3();
var params = {
        Bucket: 'mybucketname',
        Key: 'assets/img/quotes.png',
        Body: "hello"
    };
    s3.putObject(params, function (err, res) {

        if (err) {

            console.log(err);
        } else {
              debugger;
            console.log("Successfully uploaded data to myBucket/myKey");
        }
    });

（已更新）这是错误的详细信息：

XMLHttpRequest cannot load https://mybucket-name.s3-ap-southeast-
1.amazonaws.com/assets/img/quotes.png. Response to preflight request doesn't 
pass access control check: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. Origin 'http://localhost:8100' is 
therefore not allowed access. The response had HTTP status code 403.

Error: Network Failure
at XMLHttpRequest.<anonymous> (xhr.js:52)
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (ng_zone.js:227)
at t.invokeTask (polyfills.js:3)
at e.runTask (polyfills.js:3)
at XMLHttpRequest.invoke (polyfills.js:3)

注意：我不在我的 Ionic 2 应用程序中使用节点 js。我正在使用 Parse JavaScript SDK、AWS S3、AWS EC2、Elastic beanstalk 和 Ionic 2 与 Angular 2。

所以问题是：我是否正确编写了我的代码/我的代码有问题吗？谢谢:)

【问题讨论】：

嗨@Antoni。您是否在 config.xml 中请求了对 ionic 应用程序的 Internet 访问权限？
嗨@Ashan，我的应用程序具有互联网访问权限，因为它可以使用解析服务器上传文件。
您是否还在 S3 存储桶中设置了 CORS 以允许来自任何来源的请求？
嗨，Ashan，在设置 CORS 后，通过编辑权限解决了该错误。顺便说一句，感谢您的帮助！

标签： angular amazon-web-services amazon-s3 amazon-ec2 amazon-elastic-beanstalk

【解决方案1】：

您需要在AWS.config中指定bucket所在的区域。

例子：

AWS.config.update({region: 'us-west-2'});

在调用new AWS.S3()之前插入这一行。

【讨论】：

嗨，约翰，我已经更新了我的问题中错误的详细信息。请看一下。谢谢
转到 S3 的 AWS 控制台并为您的存储桶设置 CORS。它位于“权限”选项卡下。确保包含星号并且具有满足您需要的 GET、POST、PUT 等设置。 docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
嗨，John，谢谢，设置 CORS 后错误消失了，但我想问你一件事。我要上传的图片名为“quotes”，是一个 png 图像。在我的参数的 Key 属性中，我是否可以将“assets/img/quotes.png”作为图像位于 assets/img 目录中，还是我还必须做其他事情？
是的，将完整路径指定为 assets/img/quotes.png 作为密钥。我还建议在您的 params 变量中将对象的 Content-Type 设置为 image/png。添加“内容类型：图像/png”。注意 params 值的拼写。
检查您的存储桶策略。将 ACL 视为传统方法，将存储桶策略视为推荐方法。但是，ACL 为您提供对象级别控制，而策略提供存储桶级别控制。如果策略或 ACL 指定拒绝条件，则访问将被拒绝。提示：不允许对对象进行公共写访问。 aws.amazon.com/blogs/security/…

【解决方案2】：

这里是aws中使用s3桶上传图片的最新代码

var AWS = require('aws-sdk');
var fs = require('fs');
var path = require('path');
var multerS3 = require('multer-s3');

AWS.config.update({
accessKeyId: "",
secretAccessKey: "",
region:''
});

 router.post('/upload_images_s3', upload.single('image'),  (req,res,next) => {
        res.json('Successfully uploaded  files!')
 });
 
 var maxSize = 1024 * 1024 * 50;
var  rootFolder = path.resolve(__dirname, './');
var s3 = new AWS.S3({params: {Bucket: 'keyfi'}});
var upload = multer({
    storage: multerS3({
      s3: s3,
      bucket: 'keyfi/images',
      acl: 'public-read-write',
      limits: {
        fileSize: maxSize
    },
      metadata: function (req, file, cb) {
        cb(null,{fieldName:file.originalname});
        console.log(file);
      },
      key: function (req, file, cb) {
       
        cb(null,file.originalname)
      }
    })
  })

【讨论】：