@be-link/cos 1.11.4 → 1.11.5-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,11 +1,335 @@
1
- # `cos`
1
+ # @be-link/cos
2
2
 
3
- > TODO: description
3
+ 腾讯云 COS 浏览器端文件上传工具。
4
4
 
5
- ## Usage
5
+ ## 功能特性
6
6
 
7
+ - 🌐 **浏览器端上传** - 单文件上传,支持进度回调
8
+ - 🔐 **安全可靠** - 自动获取临时密钥,无需暴露永久密钥
9
+ - ⚡ **性能优化** - 大文件 MD5 分片计算,避免内存溢出
10
+ - 📝 **TypeScript** - 完整的类型定义支持
11
+ - 🎯 **多环境** - 支持开发、测试、生产环境配置
12
+ - 🔧 **安全设计** - mode 必填无默认值,强制显式配置,避免环境配置错误
13
+
14
+ ---
15
+
16
+ ## 安装
17
+
18
+ ```bash
19
+ npm install @be-link/cos cos-js-sdk-v5 crypto-js
20
+ ```
21
+
22
+ ---
23
+
24
+ ## 快速开始
25
+
26
+ ### Vue 项目
27
+
28
+ ```vue
29
+ <template>
30
+ <div>
31
+ <input type="file" @change="handleFileChange" />
32
+ <button @click="handleUpload" :disabled="uploading">
33
+ {{ uploading ? `上传中 ${progress}%` : '上传文件' }}
34
+ </button>
35
+ </div>
36
+ </template>
37
+
38
+ <script setup>
39
+ import { ref } from 'vue';
40
+ import { BeLinkCOS } from '@be-link/cos';
41
+
42
+ const file = ref(null);
43
+ const uploading = ref(false);
44
+ const progress = ref(0);
45
+
46
+ // 创建上传器实例(mode 必填)
47
+ const uploader = new BeLinkCOS({ mode: 'production' });
48
+
49
+ const handleFileChange = (e) => {
50
+ file.value = e.target.files[0];
51
+ };
52
+
53
+ const handleUpload = async () => {
54
+ if (!file.value) return;
55
+
56
+ uploading.value = true;
57
+ try {
58
+ const result = await uploader.uploadFile(file.value, {
59
+ onProgressCallback: (data) => {
60
+ progress.value = Math.round(data.percent * 100);
61
+ },
62
+ });
63
+ console.log('上传成功:', result.url);
64
+ } catch (error) {
65
+ console.error('上传失败:', error);
66
+ } finally {
67
+ uploading.value = false;
68
+ }
69
+ };
70
+ </script>
71
+ ```
72
+
73
+ ### React 项目
74
+
75
+ ```jsx
76
+ import { useState } from 'react';
77
+ import { BeLinkCOS } from '@be-link/cos';
78
+
79
+ // 创建上传器实例(mode 必填)
80
+ const uploader = new BeLinkCOS({ mode: 'production' });
81
+
82
+ function FileUploader() {
83
+ const [file, setFile] = useState(null);
84
+ const [uploading, setUploading] = useState(false);
85
+ const [progress, setProgress] = useState(0);
86
+
87
+ const handleUpload = async () => {
88
+ if (!file) return;
89
+
90
+ setUploading(true);
91
+ try {
92
+ const result = await uploader.uploadFile(file, {
93
+ onProgressCallback: (data) => setProgress(Math.round(data.percent * 100)),
94
+ });
95
+ console.log('上传成功:', result.url);
96
+ } catch (error) {
97
+ console.error('上传失败:', error);
98
+ } finally {
99
+ setUploading(false);
100
+ }
101
+ };
102
+
103
+ return (
104
+ <div>
105
+ <input type='file' onChange={(e) => setFile(e.target.files[0])} />
106
+ <button onClick={handleUpload} disabled={uploading}>
107
+ {uploading ? `上传中 ${progress}%` : '上传文件'}
108
+ </button>
109
+ </div>
110
+ );
111
+ }
112
+ ```
113
+
114
+ ### 原生 JS
115
+
116
+ ```html
117
+ <!DOCTYPE html>
118
+ <html>
119
+ <head>
120
+ <script type="module">
121
+ import { BeLinkCOS } from '@be-link/cos';
122
+
123
+ // 创建上传器实例(mode 必填)
124
+ const uploader = new BeLinkCOS({ mode: 'production' });
125
+
126
+ // 上传
127
+ document.getElementById('upload').onclick = async () => {
128
+ const file = document.getElementById('file').files[0];
129
+ const result = await uploader.uploadFile(file, {
130
+ onProgressCallback: (data) => {
131
+ console.log('进度:', data.percent * 100 + '%');
132
+ },
133
+ });
134
+ console.log('上传成功:', result.url);
135
+ };
136
+ </script>
137
+ </head>
138
+ <body>
139
+ <input type="file" id="file" />
140
+ <button id="upload">上传</button>
141
+ </body>
142
+ </html>
7
143
  ```
8
- const cos = require('cos');
9
144
 
10
- // TODO: DEMONSTRATE API
145
+ ---
146
+
147
+ ## 多环境上传
148
+
149
+ 支持同时上传到不同环境:
150
+
151
+ ```typescript
152
+ import { BeLinkCOS } from '@be-link/cos';
153
+
154
+ // 创建开发环境上传器
155
+ const devUploader = new BeLinkCOS({ mode: 'development' });
156
+
157
+ // 创建生产环境上传器
158
+ const prodUploader = new BeLinkCOS({ mode: 'production' });
159
+
160
+ // 同时上传到不同环境
161
+ await Promise.all([devUploader.uploadFile(file), prodUploader.uploadFile(file)]);
162
+ ```
163
+
164
+ ---
165
+
166
+ ## API 文档
167
+
168
+ ### `new BeLinkCOS(config)`
169
+
170
+ 创建 COS 上传器实例
171
+
172
+ **参数:**
173
+
174
+ - `config.mode` - **必填,无默认值**
175
+ - 环境模式:`'development'` | `'testing'` | `'production'`
176
+ - 设计上强制必填,避免误传到错误环境
177
+ - `config.headers` - 可选,自定义请求头
178
+ - `config.ScopeLimit` - 可选,是否限制临时密钥范围(默认 `false`)
179
+
180
+ **示例:**
181
+
182
+ ```typescript
183
+ // 基础使用
184
+ const uploader = new BeLinkCOS({ mode: 'production' });
185
+
186
+ // 带自定义请求头
187
+ const uploader = new BeLinkCOS({
188
+ mode: 'production',
189
+ headers: { 'x-custom': 'value' },
190
+ });
191
+ ```
192
+
193
+ ### `uploader.uploadFile(file, config)`
194
+
195
+ 上传文件到 COS
196
+
197
+ **参数:**
198
+
199
+ - `file` - 要上传的文件对象
200
+ - `config.onProgressCallback` - 可选,进度回调函数
201
+ - `config.Headers` - 可选,自定义请求头
202
+
203
+ **返回:**
204
+
205
+ ```typescript
206
+ {
207
+ url: string, // 文件访问 URL
208
+ Location: string, // 文件位置
209
+ ETag: string, // 文件 ETag
210
+ statusCode: number, // HTTP 状态码
211
+ headers: {} // 响应头
212
+ }
11
213
  ```
214
+
215
+ **示例:**
216
+
217
+ ```typescript
218
+ const result = await uploader.uploadFile(file, {
219
+ onProgressCallback: (data) => {
220
+ console.log('进度:', data.percent * 100 + '%');
221
+ },
222
+ });
223
+ console.log('上传成功:', result.url);
224
+ ```
225
+
226
+ ### `uploader.getSourceUrl(file)`
227
+
228
+ 获取文件上传后的 URL(不执行实际上传)
229
+
230
+ ```typescript
231
+ const url = await uploader.getSourceUrl(file);
232
+ ```
233
+
234
+ ### `uploader.createFileMd5(file, chunkSize?)`
235
+
236
+ 计算文件 MD5 哈希值
237
+
238
+ ```typescript
239
+ const md5 = await uploader.createFileMd5(file, 2 * 1024 * 1024); // 默认 2MB 分片
240
+ ```
241
+
242
+ ---
243
+
244
+ ## 环境配置
245
+
246
+ | 环境 | Bucket | 区域 |
247
+ | ----------- | ------------------ | ---------- |
248
+ | development | dev-1304510571 | ap-nanjing |
249
+ | testing | dev-1304510571 | ap-nanjing |
250
+ | production | release-1304510571 | ap-nanjing |
251
+
252
+ ---
253
+
254
+ ## TypeScript 类型
255
+
256
+ ```typescript
257
+ import { BeLinkCOS } from '@be-link/cos';
258
+ import type {
259
+ EnvMode, // 'development' | 'testing' | 'production'
260
+ BucketConfig, // Bucket 配置
261
+ InitConfig, // 初始化配置
262
+ UploadConfig, // 上传配置
263
+ UploadResult, // 上传结果
264
+ } from '@be-link/cos';
265
+ ```
266
+
267
+ ---
268
+
269
+ ## 常见问题
270
+
271
+ ### 1. 为什么 mode 必须传?没有默认值?
272
+
273
+ **设计理念:强制显式配置,避免默认值陷阱**
274
+
275
+ 如果提供默认值(如 `development`),很容易出现以下问题:
276
+
277
+ - 开发者忘记修改配置,生产环境代码误传到开发环境
278
+ - 或者开发环境配置被复制到生产,导致测试数据污染生产环境
279
+
280
+ **因此,我们要求必须显式指定环境:**
281
+
282
+ ```typescript
283
+ // ✅ 正确:明确指定环境,不会搞错
284
+ const uploader = new BeLinkCOS({ mode: 'production' });
285
+
286
+ // ❌ 错误:TypeScript 编译错误,强制必须传 mode
287
+ const uploader = new BeLinkCOS();
288
+ ```
289
+
290
+ 这样设计更安全,用户必须思考"我要上传到哪个环境"。
291
+
292
+ ### 2. 上传失败怎么办?
293
+
294
+ 检查:
295
+
296
+ - `mode` 参数是否正确
297
+ - 网络是否正常
298
+ - 浏览器控制台是否有错误信息
299
+
300
+ ### 3. 文件存储路径是什么?
301
+
302
+ 文件会自动存储到:`/beLinkAllSource/static/{文件类型}/{文件名}_{时间戳}.{扩展名}`
303
+
304
+ 例如:`/beLinkAllSource/static/image/avatar_1699999999999.png`
305
+
306
+ ### 4. 支持哪些文件类型?
307
+
308
+ 支持所有文件类型,会根据文件的 MIME 类型自动分类存储(image、video、audio、application、text、other)。
309
+
310
+ ### 5. 如何切换环境?
311
+
312
+ 创建不同环境的实例:
313
+
314
+ ```typescript
315
+ const devUploader = new BeLinkCOS({ mode: 'development' });
316
+ const prodUploader = new BeLinkCOS({ mode: 'production' });
317
+ ```
318
+
319
+ ---
320
+
321
+ ## 安全说明
322
+
323
+ ✅ 本工具使用**临时密钥**方式,通过云函数动态获取授权
324
+ ✅ 不会在客户端暴露永久密钥,安全可靠
325
+ ✅ 临时密钥具有时效性,过期自动失效
326
+
327
+ ---
328
+
329
+ ## 许可证
330
+
331
+ ISC
332
+
333
+ ## 维护者
334
+
335
+ zhuifeng <yangyiboys@163.com>
@@ -1,2 +1,118 @@
1
- declare const beLinkCOS: any;
2
- export default beLinkCOS;
1
+ import { type EnvMode } from './config';
2
+ import type { InitConfig, UploadConfig, UploadResult } from './types';
3
+ /**
4
+ * BeLinkCOS 类 - 腾讯云 COS 文件上传工具
5
+ *
6
+ * 功能:文件上传、MD5 计算、临时密钥授权
7
+ *
8
+ * @example
9
+ * import { BeLinkCOS } from '@be-link/cos';
10
+ *
11
+ * const uploader = new BeLinkCOS({ mode: 'production' });
12
+ * await uploader.uploadFile(file);
13
+ */
14
+ export declare class BeLinkCOS {
15
+ /** COS SDK 实例 */
16
+ private cos;
17
+ /** COS 存储的基础路径 */
18
+ private readonly basePath;
19
+ /** 自定义请求头 */
20
+ headers: Record<string, any>;
21
+ /** 当前环境模式 */
22
+ mode: EnvMode;
23
+ /** 是否限制临时密钥的使用范围 */
24
+ private scopeLimit;
25
+ /**
26
+ * 构造函数
27
+ *
28
+ * 注意:mode 参数必填,没有默认值
29
+ * 设计理念:强制显式配置环境,避免误传到错误的环境
30
+ *
31
+ * @param config - 初始化配置
32
+ * @param config.mode - **必填** 环境模式:'development' | 'testing' | 'production'
33
+ * @param config.headers - 可选,自定义请求头
34
+ * @param config.ScopeLimit - 可选,是否限制临时密钥的使用范围(默认 false)
35
+ *
36
+ * @example
37
+ * // 基础使用
38
+ * const uploader = new BeLinkCOS({ mode: 'production' });
39
+ *
40
+ * // 带自定义请求头
41
+ * const uploader = new BeLinkCOS({
42
+ * mode: 'production',
43
+ * headers: { 'x-custom': 'value' }
44
+ * });
45
+ */
46
+ constructor(config: InitConfig);
47
+ /**
48
+ * 初始化 COS SDK 实例
49
+ *
50
+ * 内部方法,通过云函数获取临时密钥
51
+ * 首次上传时会自动调用,也可以手动调用以重新初始化
52
+ *
53
+ * @returns Promise<void>
54
+ */
55
+ private initCOS;
56
+ /**
57
+ * 计算文件的 MD5 哈希值
58
+ *
59
+ * 性能优化:
60
+ * - 小文件(< 10MB):一次性读取,速度更快
61
+ * - 大文件:分片读取,避免内存溢出
62
+ *
63
+ * @param file - 要计算 MD5 的文件对象
64
+ * @param chunkSize - 分片大小(字节),默认 2MB
65
+ * @returns Promise<string> 文件的 MD5 哈希值
66
+ *
67
+ * @example
68
+ * const md5 = await beLinkCOS.createFileMd5(file);
69
+ * console.log('文件 MD5:', md5);
70
+ */
71
+ createFileMd5(file: File, chunkSize?: number): Promise<string>;
72
+ /**
73
+ * 生成文件在 COS 中的存储路径
74
+ *
75
+ * 路径规则:/beLinkAllSource/static/{文件类型}/{文件名}_{时间戳}.{扩展名}
76
+ * 例如:/beLinkAllSource/static/image/avatar_1699999999999.png
77
+ *
78
+ * @param file - 文件对象
79
+ * @returns Promise<string> COS 存储路径
80
+ */
81
+ private getFilePath;
82
+ /**
83
+ * 获取文件上传后的访问 URL(不执行实际上传)
84
+ *
85
+ * 用于在上传前预览文件的最终 URL
86
+ *
87
+ * @param file - 文件对象
88
+ * @returns Promise<string> 文件的完整访问 URL
89
+ *
90
+ * @example
91
+ * const url = await beLinkCOS.getSourceUrl(file);
92
+ * console.log('文件将上传到:', url);
93
+ */
94
+ getSourceUrl(file: File): Promise<string>;
95
+ /**
96
+ * 上传文件到腾讯云 COS
97
+ *
98
+ * 核心功能:将文件上传到对应环境的 COS 存储桶
99
+ * 支持上传进度回调、自定义请求头等配置
100
+ *
101
+ * @param file - 要上传的文件对象
102
+ * @param config - 上传配置(可选)
103
+ * @param config.Headers - 自定义请求头
104
+ * @param config.onProgressCallback - 上传进度回调函数
105
+ * @returns Promise<UploadResult> 上传结果,包含文件 URL、ETag 等信息
106
+ *
107
+ * @example
108
+ * const uploader = new BeLinkCOS({ mode: 'production' });
109
+ * const result = await uploader.uploadFile(file, {
110
+ * onProgressCallback: (progressData) => {
111
+ * console.log('进度:', progressData.percent * 100 + '%');
112
+ * }
113
+ * });
114
+ * console.log('文件 URL:', result.url);
115
+ */
116
+ uploadFile(file: File, config?: UploadConfig): Promise<UploadResult>;
117
+ }
118
+ //# sourceMappingURL=beLinkCos.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"beLinkCos.d.ts","sourceRoot":"","sources":["../src/beLinkCos.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,qBAAa,SAAS;IACpB,iBAAiB;IACjB,OAAO,CAAC,GAAG,CAAa;IACxB,kBAAkB;IAClB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsC;IAC/D,aAAa;IACN,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,aAAa;IACN,IAAI,EAAE,OAAO,CAAC;IACrB,oBAAoB;IACpB,OAAO,CAAC,UAAU,CAAU;IAE5B;;;;;;;;;;;;;;;;;;;;OAoBG;gBACS,MAAM,EAAE,UAAU;IAM9B;;;;;;;OAOG;YACW,OAAO;IAoCrB;;;;;;;;;;;;;;OAcG;IACI,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,GAAE,MAAwB,GAAG,OAAO,CAAC,MAAM,CAAC;IA+DtF;;;;;;;;OAQG;YACW,WAAW;IASzB;;;;;;;;;;;OAWG;IACU,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC;IAKtD;;;;;;;;;;;;;;;;;;;;OAoBG;IACU,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;CA6BlF"}
@@ -0,0 +1,26 @@
1
+ /**
2
+ * 环境模式类型
3
+ * - development: 开发环境
4
+ * - testing: 测试环境
5
+ * - production: 生产环境
6
+ */
7
+ export type EnvMode = 'development' | 'testing' | 'production';
8
+ /**
9
+ * COS 存储桶配置接口
10
+ */
11
+ export interface BucketConfig {
12
+ /** 存储桶名称 */
13
+ name: string;
14
+ /** 存储桶访问域名 */
15
+ host: string;
16
+ /** 访问协议 */
17
+ protocol: string;
18
+ }
19
+ /**
20
+ * 各环境的 COS 存储桶配置
21
+ * 根据环境自动切换到对应的存储桶
22
+ */
23
+ export declare const BUCKETS_CONFIG: Record<EnvMode, BucketConfig>;
24
+ /** COS 存储桶所在地域(南京) */
25
+ export declare const REGION: "ap-nanjing";
26
+ //# sourceMappingURL=config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,YAAY,CAAC;AAE/D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,YAAY;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,cAAc;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW;IACX,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,OAAO,EAAE,YAAY,CAgBxD,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,MAAM,EAAG,YAAqB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1 +1,5 @@
1
- export { default as beLinkCOS } from './beLinkCos';
1
+ export { BeLinkCOS } from './beLinkCos';
2
+ export type { EnvMode, BucketConfig } from './config';
3
+ export { BUCKETS_CONFIG, REGION } from './config';
4
+ export type { InitConfig, UploadConfig, UploadResult } from './types';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlD,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}