@mbjia/upload-manager

Package

@mbjia/upload-manager

上传管理包，基于 Uppy、SharedWorker 和 Comlink。它负责跨页面上传队列、上传状态和上传事件管理。

全局上传上传数据

安装

npm install @mbjia/upload-manager

何时使用

场景	是否需要
接入 EveryWhereUpload 或全局上传能力	需要
需要监听 Uppy 上传事件	需要
只做普通文件选择，不上传到业务素材库	不一定需要，可先看 @mbjia/ui 的 Upload

导出

export { uppy, setToken, IndexedDBStore }
export function uppy_on(event, callback): void
export function uppy_off(event, callback): void
export function setSharedWorkerApiCookie(): void
export default uppy

导出	类型	说明
UploadManager	模块导出	上传管理主模块，入口文件通过 export * from './UploadManager' 暴露。
uppy	Comlink.Remote<SXUppy<SXMeta>>	SharedWorker 中的 Uppy 上传实例代理。
setToken	(value: string) => void	设置上传请求 token。
uppy_on	(event, callback) => void	监听 Uppy 事件。
uppy_off	(event, callback) => void	取消监听 Uppy 事件。
IndexedDBStore	class	Uppy 文件和缩略图的 IndexedDB 存储实现。
setSharedWorkerApiCookie	() => void	当前源码为空函数，保留扩展位。

事件监听

import { uppy_on, uppy_off } from '@mbjia/upload-manager'

const onProgress = (file, progress) => {
  console.log(file.id, progress)
}

uppy_on('upload-progress', onProgress)
uppy_off('upload-progress', onProgress)

事件来自 @uppy/core 的 UppyEventMap，常见事件包括：

事件	说明
file-added	文件加入队列。
upload-progress	上传进度变化。
upload-success	单文件上传成功。
upload-error	单文件上传失败。
complete	批次上传完成。

IndexedDBStore

IndexedDBStore 用于跨页面/刷新恢复上传文件 Blob 和缩略图。

const store = new IndexedDBStore({
  storeName: 'asset-upload',
  expires: 24 * 60 * 60 * 1000,
})

await store.put(file)
const files = await store.list()

构造参数：

字段	类型	默认值	说明
dbName	string	'uppy-blobs'	IndexedDB 数据库名。
storeName	string	'default'	当前业务存储空间。
expires	number	24 小时	过期时间。
maxFileSize	number	1 GiB	单文件最大存储大小。
maxTotalSize	number	5 GiB	总存储大小。

方法：

方法	返回值	说明
ready	Promise<IDBDatabase>	数据库连接。
key(fileID)	string	生成 store 内部 key。
list()	Promise<Record<string, Blob>>	列出当前 store 的文件。
get(fileID)	Promise<{ id; data }>	获取指定文件 Blob。
getSize()	Promise<number>	当前 store 已占用大小。
put(file)	Promise<T>	保存 Uppy 文件 Blob。
delete(fileID)	Promise<unknown>	删除文件。
putThumbnail(fileID, preview)	Promise<unknown>	保存缩略图。
deleteThumbnail(fileID)	Promise<unknown>	删除缩略图。
listThumbnails()	Promise<Record<string, string>>	列出缩略图。
IndexedDBStore.cleanup()	Promise<void>	清理过期 Blob。
IndexedDBStore.isSupported	boolean	当前浏览器是否支持 IndexedDB。

浏览器要求

必须支持 SharedWorker。如果不支持，源码会输出：

当前浏览器不支持SharedWorker，上传素材会存在问题

生产混剪项目需要配置：

• process.env.isMbjiaMixedCutProject
• process.env.sharedWorkerPath

上传数据结构见 上传数据。