lscos-client v1.0.32

• 接入说明

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

• 资源位于node_modules/lscos-cliet/dist，为已编译的js和wasm
• 资源属于web worker，运行时加载
• 资源用到了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平台配置跨域和请求头配置

6. 上传事件监听

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

7. 获得文件URL

• 如果步骤5指定的acl为public-read（默认），则在步骤6的success回调中会获得URL，该URL会持久可用
• 如果acl为private，则success回调中获得的URL为只有1分钟有效的临时链接，后续业务应当通过业务后台申请签名URL来获得可用的临时链接

  		function getPathFromUrl(url: string) {
  			const m = url.match(/http[s]?:\/\/[^\/]+(\/[^?]+)/);
        if(m && m) {
            return m[1];
        }
  			return url;
  		}
  	
  		export function download(url: string, redirect: '' | 'current' | 'new' = '', signal?: AbortSignal, platform = Platform.Qcloud) {
  			const path = other.getPathFromUrl(url);
  			if(redirect) {
  				const retUrl = `/api/download?platform=${platform}&path=${path}`;
  				if(redirect === 'current') {
  					window.location.href = retUrl;
  				} else {
  					window.open(retUrl);
  				}
  				return Promise.resolve(retUrl);
  			}
  			const headers = { 'Accept': 'application/json' };
  			return fetch(`/api/download?platform=${platform}&path=${path}`, { headers, signal }).then(res => res.json()).then(res => {
  				return res.data.url as string;
  			})
  		}

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.json().then(res => {
                    throw res;
                })
            } 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