流程

1. 向後端請求s3暫時憑證
2. 初始化 uploader, 需以下參數: s3 Bucket + s3 region + s3暫時憑證
3. 執行切片上傳

安裝

yarn add @lfk29m/s3-uploader

使用方式

import {createS3Uploader} from "@lfk29m/s3-uploader"

const s3Bucket = 'lfk29m-s3'
const s3Region = 'us-west-2'
// 向後端取得s3Credentials
const s3Credentials = {
    accessKeyId: "ASIAS7BJTKD2JLWGGKVE",
    secretAccessKey: "7+kALJkbl+LdHoVitIznLJyNIEQ6oukcXUuTLsMT",
    sessionToken: "IQoJb3JpZ2luX2VjEJn//////////wEaDmFwLW5vcnRoZWFzdC0xIkcwRQIgEswG6ILQMAPhp5UE4EZcfo1rtqSK0kPPcUJ9RKmJiNsCIQC2QTtZWquaDPn2Egwz2VsPun4Hop6sdrLl3kfdwVBhcSqrAgiy//////////8BEAEaDDIwNDA5ODE5NTcwMCIM6PZn0EYNgHXkwW1vKv8BIbEOiHG6REumZqmuHC4DD5cqtoQvOQP9YVl4glMM+uGspE2kVP+bwSpu/rxQmxA8XiTmZ5eCjqNZmqg6uM3ON9mj3S7fmpN1ou2ylykTJnS7fps/lBqWe+TYaBWibBuoDLdLdp/yZbP0kj73sgFiqbGcpdOIUhY/vsMdZEf6LCayfwUd9ptLBHZUehML0zN4hC1SvYlQyJiFblgfM2Gz50zEqCZBeTZ8bUVVSY7U1JNVEIz/1W59F4KE6ZXJVtrKQw+LkZ4RilawULdWoMlSjCmjKcDhqfncr5Ho4Kwbk83LcpLqKpsqx+uSniqwJXTxhRs+GyZck6ZL4fN57F+XMIyk9qIGOp0BSa3hKbd+ZhRUE3uKNHcXKAJ2wC8mO3rOTacW0VwdrAXuRYL3MdHMWEzwtv2jSvXUcVSxON/6H4oiQxSaXv3sTUG+/h1nq8T+v8SA0WLzldLHdUqMtamrYoHuIEKLDvfnNz/w/fkoI5Z/IAcyY19ks+ac32sPJ/0sdjsPzmBKME0NSDGQwhFSoRxRm+GNSJqRfNqpkl9dBgo9eaChrw==",
}

// 初始化uploader實體
const uploader = createS3Uploader({
    s3Bucket, 
    s3Credentials, 
    s3Region, 
    debug: true
})

// 根據檔名檢查localStorage是否有未上傳完的檔案 
const unFinishedFile = uploader.checkUnFinishedFile({
    filename: 'mean it.mp4'
})

// 執行上傳
const inputEle = document.querySelector('input')
inputEle.addEventListener('change', async function(e) {
    const file = e.target.files[0]
    const onProgress = function(state) {
        // TODO
    }
    try {
        await uploader.upload({
            file, 
            onProgress
        })
        alert('success')
    } catch (e) {
        console.error(e)
        alert('error')
    }

})