素肌にサスペンダー

個人的な備忘と日記

JavaScriptで、AWSのS3にファイルアップする方法

JavaScript AWS S3

1.AWSコンソール上で、CORSの設定をする。

以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-example-photo-album-cors-configuration

2.S3のConfig情報を確認する。

以下の記事を参考に、アクセスキー、シークレットキーを取得。

tech-blog.s-yoshiki.com

加えて、バケットネームとリージョンも確認しておく。

3.JavaScriptのコードを書く。

ファイルをローカルからアップしてアップロードボタンを押すとアップロードされるサンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!-- aws-sdk読み込み -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.12.0.min.js"></script>
  </head>
  <body>
    <p>
      <input id="upload" name="upload" type="file">
    </p>
    <button onclick="uploadFile()">
      アップロード
    </button>
  <script>
    // AWS Config情報
    const accessKeyId = 'アクセスキーID';
    const secretKey = 'シークレットキー';
    const bucketName = 'バケットネーム';
    const region = 'リージョン';

    // AWS Config設定
    AWS.config.update({
      accessKeyId: accessKeyId,
      secretAccessKey: secretKey,
      region: region
    });

    // APIのバージョン指定
    AWS.config.apiVersions = {
      rekognition: '2016-06-27',
    };

    // S3にファイルをアップロードする関数
    const uploadFile = function() {
      const s3 = new AWS.S3({
        params: {
          Bucket: bucketName
        }
      });
      const file = document.getElementById('upload').files[0];
      if (file) {
        s3.putObject({
          Key: file.name,
          // ディレクトリ分けしたい場合
          // Key: 'directory/' + file.name,
          ContentType: file.type,
          Body: file,
          ACL: "public-read"
        }, function(err, data) {
          if (data === null) {
            console.log(err)
          }
        });
      }
    }
  </script>
  </body>
</html>

※ディレクトリ分けたい場合は、Keyに文字列を付与する 参考 dev.classmethod.jp