ionic3 aws s3 へ画像や動画アップロード
ざっくり以下の流れで実装できた。
・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