ionic3 aws s3 へ画像や動画アップロード

ionic3 cordova

ざっくり以下の流れで実装できた。
・awsのアクセスキーとシークレットキーを入手
・s3のcorsの設定
・aws-sdk（javascript版）を入手
・ionic 処理実装

アクセスキーとシークレットキーをコードに埋め込むのは現実的ではないが今回は動作確認という意味でその形としました。

s3 corsの設定
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
  <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>PUT</AllowedMethod>
  <AllowedHeader>Authorization</AllowedHeader>
  <AllowedHeader>Content-Type</AllowedHeader>
  <AllowedHeader>X-Amz-Date</AllowedHeader>
  <AllowedHeader>X-Amz-User-Agent</AllowedHeader>
</CORSRule>
</CORSConfiguration>
aws-sdkの入手

と言っても今回はcdnを直接貼り付けただけ

src/index.html

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

</head>
実装

src/pages/home/home.ts

import { Component } from '@angular/core';

declare var AWS :any

・・・

export class HomePage {

  uploadFile = () => {

    let REGION = 'ap-northeast-1''
    let ACCESS_KEY = 'xxxxxxxxxxxxxx'
    let SECRET_KEY = 'xxxxxxxxxxxxxx'
    let BUCKET = 'test-bucket'

    let file = Fileオブジェクト
    let key = 'path/to/file.mp4'
    let contentType = 'video/mp4'

    let blobUrl = window.URL.createObjectURL(file)

    var xhr = new XMLHttpRequest();
    xhr.open('GET', blobUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function(e) {

    AWS.config.update({
      region: REGION,
      accessKeyId: ACCESS_KEY,
      secretAccessKey: SECRET_KEY
    })

    var bucket = new AWS.S3({ params: { Bucket: BUCKET } })
    bucket.putObject({
      Key: key,
      Body: xhr.response,
      ContentType: contentType
    },(error, data) => {
    })

  }
  xhr.send()
}

以上です

参考URL
https://dev.classmethod.jp/cloud/aws/s3-cors-upload/
http://yamano3201.hatenablog.jp/entry/2016/03/05/214018#S3%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AFKey%E3%81%A8Body%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B