概要

<input type="file">で指定したファイルをAxiosを使ってS3の署名付きURLへファイルをアップロードする。

実装

var a = $('input[type="file"]')
var reader = new FileReader()
reader.readAsArrayBuffer(a.files[0])

// アップロード用の署名付きURL
var url = 'https://test-pre-signed-url-bucket.s3.amazonaws.com/put/update?...略...'
axios({
    method: 'PUT',
    url: url,
    headers: {
        'Content-Type': 'image/*', // アップロードしたいファイルに合わせる
    },
    data: reader.result // reader.readAsArrayBuffer(a.files[0]) した結果が取得できる
    })

エラー時対応

CORSのエラーになる場合

S3 > バケット選択 > アクセス権限 > CORSの設定

を行う必要がある。

403が返ってくる場合

S3の署名バージョンを4にする必要がある。

s3 = boto3.client('s3', config=Config(signature_version='s3v4'))

# Generate the URL to get 'key-name' from 'bucket-name'
url = s3.generate_presigned_url(
    ClientMethod='put_object',
    Params={
        'Bucket': 'bucket-name',
        'Key': 'key-name'
    }
)

参考

Node.jsで発行したS3の署名付きURLへアップロードすると403エラーになる
Boto3公式