前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载导读uppy/onedrive是 Uppy 生态中负责从微软 OneDrive 账户导入文件的远程来源Remote Source插件。本文以该包的 CHANGELOG.md 为时间主线串联其 TypeScript 重构、导出映射export maps、token 刷新、列表加载性能等关键演进并结合 OneDrive.tsx 与 Companion 服务端适配器的源码实现说明插件如何接入、如何认证、如何分页拉取文件最终落到一条客户端插件 Companion 服务端的完整调用链上。读完本文你将掌握 Uppy OneDrive 插件从安装、配置到服务端鉴权与数据适配的完整实战方案。一、uppy/onedrive 插件概览它在 Uppy 中的角色1.1 定位与架构uppy/onedrive是一个 UIPlugin 类型的acquirer采集器插件。从 OneDrive.tsx 的构造函数可以确认constructor(uppy: UppyM, B, opts: OneDriveOptions) { super(uppy, opts) this.type acquirer this.storage this.opts.storage || tokenStorage this.id this.opts.id || OneDrive ... this.provider new Provider(uppy, { companionUrl: this.opts.companionUrl, companionHeaders: this.opts.companionHeaders, companionKeysParams: this.opts.companionKeysParams, companionCookiesRule: this.opts.companionCookiesRule, provider: onedrive, pluginId: this.id, supportsRefreshToken: true, }) }关键点在于插件本身不直接与微软 Graph API 通信。所有 OAuth 认证、文件列举、下载都由配套的 Companion 服务端完成浏览器端只通过companionUrl与 Companion 交互。这种Companion 代理模式把带宽消耗从用户手机端转移到服务端是 Uppy 远程来源插件的统一设计。1.2 依赖关系与公开 API从 package.json 可见唯一运行时依赖为preact^10.29.2对uppy/core是 peerDependency导出映射仅暴露.即lib/index.js与./package.json两项sideEffects: false支持摇树优化。index.ts只做两件事导出OneDriveOptions类型以及默认导出OneDrive类。OneDriveOptions的定义是CompanionPluginOptions { locale?: LocaleStringstypeof locale }也就是说所有 Companion 相关配置companionUrl、companionHeaders、companionKeysParams、companionCookiesRule、companionAllowedHosts等均被继承。二、安装与基础接入2.1 安装$ npm install uppy/onedriveuppy/onedrive要求同时安装uppy/corepeerDependency与uppy/companion服务端。也可以使用 Transloadit 的 Smart CDN 预构建 bundle此时Uppy挂载在全局window.Uppy上。2.2 最小接入代码import Uppy from uppy/core import OneDrive from uppy/onedrive const uppy new Uppy() uppy.use(OneDrive, { // 必填Companion 实例地址如 https://your-companion.example.com companionUrl: https://your-companion.example.com, // 可选随请求携带的请求头如自定义鉴权 companionHeaders: {}, // 可选Companion 允许的主机白名单 companionAllowedHosts: *, })插件安装时OneDrive.tsx 的 install()会基于this.opts.target挂载ProviderViews渲染视图未指定 target 时默认渲染到全局 Dashboard。三、CHANGELOG 主线解读OneDrive 插件的关键演进uppy/onedrive的 CHANGELOG.md 记录了 2.x 到 6.0.0 的全部变更以下梳理出对使用者影响最大的几条主线。3.1 类型系统与模块化演进2.1.0重构为 ESM#3694与 Uppy 3.0 全面 ESM 化的方向一致3.0.0随 Uppy v3.0.0 正式切换到 ESM4.0.0-beta.1 / 3.3.0将插件重构为 TypeScript#4979此后OneDriveOptions等类型得以显式导出配合export plugin options4.1.0#5433让用户可以从uppy/onedrive导入完整类型4.3.0使用 TypeScript 编译器替代 Babel 构建5.1.0uppy/core引入PluginTypeRegistry与类型化getPluginOneDrive 通过declare module uppy/core注册自己的类型见 OneDrive.tsx此后uppy.getPlugin(OneDrive)无需再传泛型即可获得具体类型。3.2 导出映射Export Maps——5.0.0 的重大变更5.0.0 的c5b51f6提交为所有包引入导出映射这是影响升级的两个破坏性变更CSS 导入路径变更由uppy/onedrive/dist/styles.min.css改为uppy/onedrive/css/styles.min.css深路径导入被禁止此前可以import something from uppy/onedrive/lib/foo.js现在只能导入根导出项。对uppy/react、uppy/vue、uppy/svelte的影响更大——需要 peer dependency 的组件被拆到子路径如uppy/react/dashboard只需要安装实际用到的 peer 依赖。对 OneDrive 而言5.0.1 还移除了 package.json 中的main字段明确导出映射即公共 API 契约。3.3 Token 刷新支持——5.0.2 的修复5edcb2f提交修复了 OneDrive 的supportsRefreshToken标志这对应 OneDrive.tsx 中的supportsRefreshToken: true。这意味着 OneDrive 插件允许使用刷新令牌机制access token 过期后客户端可以向 Companion 请求用 refresh token 换取新的 access token而无需用户重新授权。服务端实现位于 companion 的 onedrive/index.ts 的refreshToken()方法。3.4 列表加载性能——3.1.2 的 5-10 倍提速#4513的合并让 Google Drive / OneDrive 的列表加载快 510 倍并且始终加载全部文件不再只加载一页。这背后的实现细节见第 5 节的分页机制分析。3.5 其他值得注意的补丁4.2.1修复AsyncStore导入#55793.2.1修复 OneDrive 自定义 OAuth2 凭据#49682.0.5重构 locale 脚本并生成类型与文档#3276。四、Companion 侧配置OAuth 与鉴权4.1 OAuth 提供商注册OneDrive 在 Companion 中注册的 OAuth provider 名是microsoft见 onedrive/index.ts 的static override get oauthProvider()。在 config/grant.ts 中其配置为// for onedrive microsoft: { ...defaults, scope: [files.read.all, offline_access, User.Read], callback: /onedrive/callback, },files.read.all读取用户 OneDrive 中所有文件的只读权限offline_access获取刷新令牌支持长期离线访问配合上面的supportsRefreshTokenUser.Read读取用户资料用于显示用户名回调路径固定为/onedrive/callback。4.2 客户端到服务端的连接在 OneDrive.tsx 中this.opts.companionAllowedHosts getAllowedHosts( this.opts.companionAllowedHosts, this.opts.companionUrl, )getAllowedHosts用于在未显式配置companionAllowedHosts时从companionUrl推导允许的主机作为 CSRF 防护的一部分。Provider实例来自uppy/core/companion-client随后接管所有与 Companion 的 REST 通信。五、源码级实现列表、分页、下载与适配5.1 列表请求与并行优化onedrive/index.ts 的 list() 同时发起两个请求并等待两者完成GET me获取用户的mail/userPrincipalName用于在界面上显示用户名GET {root}/children获取文件列表其中 root 由me/drive默认或drives/{driveId}当查询参数携带driveId时决定路径形如me/drive/root/children或me/drive/items/{directory}/children。请求参数const qs new URLSearchParams({ $expand: thumbnails, // 展开缩略图 $top: String(pageSize), // 每页 999 条 }) const cursor queryRecord[cursor] if (cursor ! null) { qs.set($skiptoken, cursor) // 分页游标 }pageSize 999配合$skiptoken正是 3.1.2 版本5-10 倍提速、加载全部文件的实现基础以接近 Graph API 上限的页大小减少往返次数再通过游标持续翻页直到取完。5.2 数据适配器 adapter.tsGraph API 返回的原始结构通过 adapter.ts 转换为 Uppy 统一的 ProviderListResponse 结构isFolder优先依据remoteItem.folder跨驱动器共享项否则依据item.foldergetItemId对共享项返回remoteItem.idgetItemRequestPath拼接?driveId{driveId}查询参数保证后续下载/取 size 请求能定位到正确的驱动器getNextPagePath从响应的odata.nextLink中解析$skiptoken构造下一页路径没有 nextLink 时返回null结束翻页缩略图取thumbnails[0].medium.url文件夹图标固定为folder。5.3 下载与文件大小download()使用GET {root}/items/{id}/content将文件内容以流式stream方式从 OneDrive 拉到 Companion再转发给客户端size()通过GET {root}/items/{id}读取size字段。由于下载发生在服务端客户端尤其是移动端无需承受完整的 OneDrive → 浏览器流量。5.4 缩略图与登出thumbnail()刻意未实现——OneDrive 的公开缩略图 URL 直接由$expand: thumbnails提供因此 Companion 不需要二次请求见 onedrive/index.ts 的注释logout()返回revoked: false与手动撤销链接https://account.live.com/consent/Manage因为微软不支持编程式 OAuth2 token 撤销。5.5 错误处理语义#withErrorHandling统一了错误分类onedrive/index.tsHTTP 401 → 认证错误触发重新授权流程HTTP 400 / 403 → 用户可见错误并从响应 body 的error.message提取提示文案——典型场景是组织内用户未购买 Office 365 许可证 / 未初始化 OneDrive 个人站点其余错误按 tag如provider.onedrive.list.error记录到日志。六、从前端到后端的完整调用链一次从 OneDrive 导入文件的完整链路如下用户点击 OneDrive 图标内联 SVG见 OneDrive.tsx 的icon属性客户端Provider引导用户到 Companion 的/onedrive/callback完成微软 OAuth 授权Companion 用授权码换取并存储 access token含offline_accessscope 的 refresh token前端ProviderViews请求列表Companion 并行调用 Graph APIme与children经adapter.ts归一化后返回用户勾选文件Companion 流式下载到服务端并转交给上传目标如uppy/tus或uppy/aws-s3access token 过期时supportsRefreshToken: true触发刷新流程Companion 调用oauth20_token.srf换取新 tokenrefreshToken()。七、升级注意事项速查针对 CHANGELOG 中的破坏性变更从旧版本升级时重点检查变更旧写法新写法CSS 路径uppy/onedrive/dist/styles.min.cssuppy/onedrive/css/styles.min.css深路径导入uppy/onedrive/lib/foo.js仅允许根导出package.jsonmain存在已移除以 exports 为准getPlugin 类型需手动传泛型uppy.getPlugin(OneDrive)自动推断八、延伸阅读插件入口与选项类型packages/uppy/onedrive/src/OneDrive.tsx、packages/uppy/onedrive/src/index.ts插件 i18n 文案packages/uppy/onedrive/src/locale.ts服务端适配器与 OAuth 配置packages/uppy/companion/src/server/provider/onedrive/index.ts、packages/uppy/companion/src/server/provider/onedrive/adapter.ts、packages/uppy/companion/src/config/grant.ts包清单packages/uppy/onedrive/package.json赞分享前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载相关推荐actions-runner-controller 监控与故障排查实战指南Prometheus 指标采集与高频故障修复手册actions runner controller 监控与故障排查实战指南Prometheus 指标采集与高频故障修复手册 本文面向使用 actions ru前端UI组件后端xv6进程管理深水区进程状态机与proc.c进程表设计剖析xv6进程管理深水区进程状态机与proc.c进程表设计剖析 想真正搞懂操作系统 进程管理 的原理MIT 的教学内核 xv6 是最经典的选择。本文带你深入 x前端UI组件后端uppy/box 插件开发指南Box 云盘文件导入的技术原理与版本演进uppy/box 插件开发指南Box 云盘文件导入的技术原理与版本演进 导读 uppy/box 是 Uppy 生态中用于从用户的 Box 云盘账号导入文件前端UI组件后端上一篇Vue Flow连接线组件标记显示问题解析下一篇MediaPipe-TouchDesigner插件中图像分辨率与翻转参数的技术探讨创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考