• 为什么有这个项目

• 更安全：云厂商的sdk默认权限过大，通常需要给用户创建文件的权限，这期间创建的文件难以跟踪，成本不容易衡量，本SDK返回的临时密钥只会授予某个特定文件的分片上传权限，有效管控空间资源
• 更省成本：上传前会通过WASM校验文件唯一性，确保同一文件不重复存储两次；且可在上传时可指定文件存储周期，过期自动回收
• 速度更快：使用多分片并发上传，充分利用用户带宽，例如相较于AWS官方控制台能提升5倍左右的速度
• 同时支持多个云产商：从协议上兼容了主流云产商的文件服务
• 文件处理流水线：对于视频/图片/音频等文件，可根据需要配置流媒体转换、截图、图片带宽压缩等

• 接入说明

1. npm i lscos-client
2. 拷贝lscos-client-worker资源：到你的项目存放静态资源的目录下，例如vue框架的public目录

• 资源位于node_modules/lscos-cliet/dist，为已编译的js和wasm
• 资源属于web worker，运行时加载
• 资源用到了wasm作计算加速，对跨域有限制，不建议做跨域处理
• 业务的静态文件服务可能需注意配置wasm文件的mime响应，例如nginx的/etc/nginx/mime.types文件添加一行：application/wasm wasm;

3. 加载lscos-client-worker资源

• 资源的默认URL入口为：lscos-client-worker/index.js，可调用：setWorkerPath();进行初始化
• 业务也可调整该URL为，例如：setWorkerPath('mypath/my-worker/index.js')

4. 实现上传鉴权

• 几个概念：SDK前端（即本组件）、SDK后台（本组件对应的后台SDK）、业务前端（接入本组件的前端）、业务后台（业务前端对接的后台）
• 鉴权阶段：业务前端调用业务后台接口（通过鉴权函数），由业务后台向SDK后台请求得到上传用的临时密钥，返回业务前端
• 鉴权函数的协议定义：type InitUploadCallback = (req: InitUploadRequest) => Promise<InitUploadResponse>
• 鉴权函数经典的实现方式：fetch('业务后台鉴权url', { body: JSON.stringify(req), method: 'POST' }).then(res => res.json());

5. 开始上传

• startUpload(file: File, initUpload: InitUploadCallback, platform = Platform.Aws, uploader = '', retryLimit = 5, acl = '', asyncLimit = 5)
• file为所选中的文件
• initUpload为步骤4所实现的鉴权函数
• platform为平台
• uploader为上传用户id（建议业务后台覆盖）
• retryLimit为重试次数
• acl为文件权限控制，默认为public-read，业务如果需加密数据需改成private
• asyncLimit为并发数量，也就是同时上传的分片数
• 上传过程中，要提前到对应的COS平台配置跨域和请求头配置，典型的配置参照： | 来源 Origin | 操作 Methods | Allow-Headers | Expose-Headers | Vary | | ---- | ---- | ---- | ---- | ---- | | https://yourdomain,*yourdomain,... | PUT,GET,POST,HEAD | * | ETag,Content-Length,x-cos-request-id,Content-Disposition | 已开启 |

6. 上传事件监听

• addEventListener(eventType: 'error' | 'sha1' | 'update' | 'success', cb: (reason: string | number) => void)
• eventType 事件类型：error(出错), sha1(sha1计算进度), update(上传进度), success(上传成功)
• cb 回调函数，error/succcess事件类型时参数为string，update/sha1事件类型时参数为number

7. 获得文件URL

• 如果步骤5指定的acl为public-read（默认），则在步骤6的success回调中会获得URL，该URL会持久可用
• 如果acl为private，则success回调中获得的URL为只有1分钟有效的临时链接，后续业务应当通过业务后台申请签名URL来获得可用的临时链接
• 对于视频类文件，SDK通过异步工作流实现格式转换、截图、预览、流媒体转换，可通过以下方法获得所需的URL：

  uploader.getUrlVideo(url, 'stream');
uploader.getUrlVideo(url, 'poster');
uploader.getUrlVideo(url, 'gif');

8. 参考DEMO

<input type="file" id="file" />

import UploadClient, { setWorkerPath, Platform } from 'lscos-client'

// 此处setWorkerPath(url = 'lscos-client-worker/index.js')，根据实际情况设置

setWorkerPath();

document.getElementById('file').addEventListener('change', function(e) {

    const uploadInitCallback = function(req) {
        return fetch('/test-init-upload', { body: JSON.stringify(req), mode: 'cors', method: 'POST' }).then(res => {
            if(res.status !== 200) {
                return res.text().then(errMsg => Promise.reject(errMsg))
            } else {
                return res.json()
            }
        });
    };

    uploader.addEventListener('error', r => console.error('upload error', r))
    uploader.addEventListener('sha1', r => console.log('sha1', r));
    uploader.addEventListener('success', r => console.log('success', r));
    
    uploader.startUpload(e.target.files[0], uploadInitCallback, Platform.Qcloud, 'test');
});

9. Vue版demo参照 examples/index.vue