前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载本指南围绕 Uppy 官方仓库中 uppy/google-drive-picker 的 CHANGELOG 展开全面讲解这个基于 Google 新一代 Picker API 的云端文件获取插件它的核心选项与接入方式、从授权到文件回流的完整运行链路以及从 0.2.0 到 2.0.0 的版本演进脉络。读完本文你将能独立完成 Google Drive Picker 的接入配置理解其文件夹递归选择与共享驱动器解析的实现原理并掌握升级过程中的破坏性变更要点。插件定位用 Picker API 代替传统 Provider 流程uppy/google-drive-picker是 Uppy 官方提供的一个 acquirer获取器类型插件它让用户可以直接从自己的 Google Drive 账户导入文件而这一能力建立在 Google 全新的 Picker API 之上区别于仓库中基于 Companion OAuth 代理的uppy/google-drive传统插件。其包描述与 README 说得非常直白The Google Drive Picker plugin for Uppy lets users import files from their Google Drive account using the new Picker APIREADME.md。从源码结构看它与uppy/google-photos-picker共享同一套底层基础设施两者都复用了uppy/core中provider-views的GooglePickerView与companion-client中的createGooglePickerController只是pickerType分别为drive与photos详见 core/src/companion-client/googlePicker.ts。快速开始安装与最小配置安装该插件作为独立的 npm 包发布声明在 packages/uppy/google-drive-picker/package.json 中。它以uppy/core为 peer dependency本身仅直接依赖preact用于渲染视图其余功能全部来自uppy/core的companion-client与provider-views子模块npm install uppy/core uppy/google-drive-picker在 Uppy 实例中注册仓库自带的 React 示例 examples/react/src/App.tsx 给出了完整的接入代码核心配置项为四个import Uppy from uppy/core import GoogleDrivePicker from uppy/google-drive-picker import Tus from uppy/tus const companionUrl http://localhost:3020 const googlePickerClientId // 你的 Google OAuth Client ID const googlePickerApiKey // 你的 Google API KeyDrive Picker 需要 const googlePickerAppId // 你的 Google Cloud 项目编号Project Number const uppy new Uppy({ restrictions: { maxNumberOfFiles: 1 }, }) .use(Tus, { endpoint: https://tusd.tusdemo.net/files/ }) .use(GoogleDrivePicker, { clientId: googlePickerClientId, companionUrl, apiKey: googlePickerApiKey, appId: googlePickerAppId, })示例中clientId、apiKey、appId三者的来源注释为见 dev Dashboard 中的GOOGLE_PICKER_CLIENT_ID/GOOGLE_PICKER_API_KEY/GOOGLE_PICKER_APP_ID即需要在 Google Cloud Console 中创建 OAuth 客户端并启用 Google Picker API 后取得。选项一览以源码为准GoogleDrivePickerOptions在 src/GoogleDrivePicker.tsx 中定义选项类型必填说明clientIdstring是Google OAuth 2.0 Client ID用于触发授权流程apiKeystring是Google API KeyPicker 构建时通过setDeveloperKey()传入appIdstring是Google Cloud 项目编号Picker 构建时通过setAppId()传入companionUrlstring是Uppy Companion 服务地址用于最终拉取所选文件companionHeaders/companionCookiesRule/companionKeysParams-否透传给内部RequestClient的 Companion 通信选项storageAsyncStore否访问令牌持久化存储默认tokenStoragelocalStorage 封装localeLocaleStrings否界面文案覆盖默认文案见 src/locale.ts构造器中会创建RequestClient并通过uppy.registerRequestClient(GoogleDrivePicker.requestClientId, requestClient)注册requestClientId固定为GoogleDrivePicker这一点是后续远程文件映射到 Companion 的关键标识。运行机制从授权到文件进入上传队列1. 视图与自动唤起插件渲染的视图是GooglePickerViewcore/src/provider-views/GooglePicker/GooglePickerView.tsx。组件在挂载后先尝试从storage读取已保存的访问令牌accessToken undefined表示尚未加载完成一旦拿到令牌便自动唤起 Picker无需用户再点击未登录时则渲染AuthView授权视图已登录时渲染选择文件 / 退出登录两个按钮。2. 脚本注入与 OAuth 授权showPicker()入口位于createGooglePickerControllercore/src/companion-client/googlePicker.ts流程如下ensureScriptsInjected()按需向页面注入两个脚本Google Identity Servicesaccounts.google.com/gsi/client与apis.google.com/js/api.js后者加载client:picker模块并预载 Drive v3 REST 发现文档authorize()通过google.accounts.oauth2.initTokenClient发起 OAuth 流程Drive 场景申请的 scope 为https://www.googleapis.com/auth/drive.file源码第 173-176 行即只访问用户明确选中的文件而非整个 Drive首次授权时requestAccessToken({ prompt: consent })强制弹出账户选择与同意页已有会话则prompt: 静默刷新。3. 令牌校验与失效重授权Google Drive Picker 在令牌无效时会直接崩溃因此源码在打开 Picker 前先调用isTokenValid()请求oauth2/v1/tokeninfo校验令牌失效则抛出InvalidTokenError外层捕获后自动重新走一遍授权流程源码第 787-801 行。令牌获取成功后通过setAccessToken()写入storage键名为uppy:google-drive-picker:accessTokenlogout()调用google.accounts.oauth2.revoke撤销令牌并清除存储。4. 打开 Picker视图与功能开关showDrivePicker()源码第 298-363 行用google.picker.PickerBuilder构建选择器enableFeature(NAV_HIDDEN)隐藏顶部导航栏enableFeature(MULTISELECT_ENABLED)允许多选setDeveloperKey(apiKey)/setAppId(appId)/setOAuthToken(token)绑定前述三个必填配置addView(DocsView(ViewId.DOCS).setIncludeFolders(true).setSelectFolderEnabled(true).setMode(LIST))同时允许选择文件夹这是 1.1.0 版本引入的能力。5. 文件夹递归解析与共享驱动器支持选择文件夹是uppy/google-drive-picker相对同类插件的一个亮点。handleDocObjectRecursively()源码第 216-296 行对每个选中对象递归处理对application/vnd.google-apps.folder类型通过 Drive v3 API 列出其子项查询条件id in parents and trashed falsepageSize: 1000并携带includeItemsFromAllDrives: true与supportsAllDrives: true再对每个子项递归展开对application/vnd.google-apps.shortcut快捷方式指向文件夹的快捷方式会被整体忽略——源码注释解释得很清楚递归进快捷方式可能跳出用户预期范围并造成无限循环而直接透传给 Companion 又无法下载因此直接丢弃指向普通文件的快捷方式则按普通文件处理由于请求参数中带上了includeItemsFromAllDrives/supportsAllDrives共享驱动器shared drives中的文件夹也能被正确解析——这正是 1.1.1 版本Resolve also folders inside shared drives (but not symlinks to folders)所描述的行为。6. 映射为远程文件并交给 Companion 下载选中的文件通过mapPickerFile()源码第 574-606 行映射为 Uppy 远程文件{ name, // 文件名 type: mimeType, // MIME 类型 isRemote: true, remote: { companionUrl, url: ${companionUrl}/google-picker/get, // 交给 Companion 的下载端点 body: { fileId, accessToken, platform }, // drive 场景 requestClientId, // GoogleDrivePicker }, }随后uppy.addFiles()将文件加入上传队列后续的实际下载由 Companion 服务完成。服务端对应路由在 companion/src/server/controllers/googlePicker.ts用zod的discriminatedUnion(platform)校验请求体drive分支要求accessTokenfileIdphotos分支要求accessTokenurldrive场景调用streamGoogleFile()按fileId流式读取文件photos场景调用downloadURL()携带 Bearer 头下载媒体 URL最终经startDownUpload()进入下载即上传的管线与 Uppy 的上传插件无缝衔接。版本演进CHANGELOG 逐版解读CHANGELOG 记录了该插件从诞生到 2.0.0 的完整历程其中既有功能里程碑也有影响所有 Uppy 包的全局性变更。0.2.0Google Picker 首次引入2024 年 12 月发布的 0.2.0随 Uppy v4.8.0是该插件的起点对应提交#5443与uppy/google-photos-picker一同引入作者为 Mikael Finstad。此后 0.2.1 补齐了两件事为两个 Picker 插件添加缺失的 locale 条目#5552并修复新插件上的 TypeScript 泛型#55500.3.0 与 0.3.1 分别移除了所有 tsconfig 中的paths配置#5572、修复了 Google Picker 插件的 locale 使用问题#55750.3.3 到 0.3.5 期间locale 字符串改为可选#5728降低了本地化配置的强制程度。1.0.0Export Maps 破坏性变更1.0.0 是全局性的大版本核心是所有 Uppy 包引入 export maps。对使用方而言有两个破坏点CSS 导入路径变更uppy/package/dist/styles.min.css一律改为uppy/package/css/styles.min.css只允许导入包根路径显式导出的内容此前形如uppy/core/lib/foo.js的内部导入全部失效。同时uppy/react、uppy/vue、uppy/svelte中依赖 peer dependency 的组件被拆到子路径例如uppy/react的导入方式由import { Dashboard, StatusBar } from uppy/react;变为import Dashboard from uppy/react/dashboard; import StatusBar from uppy/react/status-bar;这样只需安装实际使用到的 peer dependency。1.0.1 进一步移除了package.json中的main字段声明 export maps 即公共 API 契约0.4.2 则定义了files字段以精确控制发布内容。1.1.0文件夹选择与类型化插件注册1.1.0 是该插件功能上的关键里程碑允许选择文件夹e661348配合前文介绍的递归解析逻辑用户可以直接选中整个文件夹内部文件会被逐层展开加入上传队列uppy/core新增PluginTypeRegistry与类型化的getPlugin重载79e6460各包注册插件 id 后uppy.getPlugin(Dashboard | Webcam)可直接返回具体插件类型无需再手动传泛型。1.1.1共享驱动器文件夹解析补上了 1.1.0 的一个边界50e2420让文件夹解析也能覆盖共享驱动器shared drives内的文件夹同时明确不解析指向文件夹的符号链接symlinks与前文handleDocObjectRecursively中丢弃文件夹快捷方式的实现相互印证。2.0.0跟随 Uppy 6 的依赖升级2.0.0 将 peer 依赖提升到uppy/core6.0.0并批量升级共享运行时依赖preact、nanoid、lodash、classnames、shallow-equal、pretty-bytes、p-queue、tus-js-client、transloadit/types、transloadit/prettier-bytesv1、is-mobile、exifr、compressorjs、rxjs、tslib等同时包含uppy/companion中jwt.ts与request.ts的类型修复以跟踪types/jsonwebtokenv9 与types/node。这一版主要面向 Uppy 6 生态功能层面未见行为变化。升级注意事项速查版本影响面需要做什么1.0.0所有 Uppy 包CSS 导入改为uppy/package/css/styles.min.css只从包根路径导入uppy/react等按子路径引入组件1.0.1打包/工具链不要再依赖main字段以 export maps 为准1.1.0uppy/core升级后getPlugin()返回类型化结果泛型参数可省略1.1.1功能增强可正常解析共享驱动器内文件夹无需改动配置2.0.0依赖/核心需与uppy/core6.0.0配套升级升级时建议同步查阅 CHANGELOG.md 与全局 CHANGELOG.md 中对应 Uppy 主版本的发布说明确认 Companion 端也需要匹配升级uppy/companion同时维护了/google-picker/get端点。仓库文件地图插件主类与类型定义packages/uppy/google-drive-picker/src/GoogleDrivePicker.tsx包导出与依赖声明packages/uppy/google-drive-picker/src/index.ts、packages/uppy/google-drive-picker/package.json默认文案packages/uppy/google-drive-picker/src/locale.tsPicker 底层实现授权、递归解析、远程文件映射packages/uppy/core/src/companion-client/googlePicker.tsPicker 交互视图packages/uppy/core/src/provider-views/GooglePicker/GooglePickerView.tsxCompanion 下载端点packages/uppy/companion/src/server/controllers/googlePicker.ts完整接入示例examples/react/src/App.tsx一句话总结uppy/google-drive-picker把 Google 新一代 Picker API 的授权、选择、文件夹递归与下载拉取全部封装进了 Uppy 的插件体系你只需要提供clientId、apiKey、appId与companionUrl四个配置就能让用户以最小的权限drive.filescope把 Drive 文件直接汇入上传队列。赞分享前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载相关推荐uppy/google-photos-picker 插件解析基于 Google Picker API 的 Google Photos 相册导入方案与版本演进指南uppy/google photos picker 插件解析基于 Google Picker API 的 Google Photos 相册导入方案与版本演进前端UI组件后端Uppy 集成 Google Drive 文件导入uppy/google-drive 插件完整实战指南Uppy 集成 Google Drive 文件导入uppy/google drive 插件完整实战指南 本指南围绕 Uppy 官方远程来源插件 uppy/前端UI组件后端Uppy Google Drive 插件演进全解析从 CHANGELOG 到源码级实现Uppy Google Drive 插件演进全解析从 CHANGELOG 到源码级实现 本文以 uppy/google drive 包的 CHANGELOG前端UI组件后端上一篇Zstandard终极指南如何用最快的实时压缩算法提升数据处理效率下一篇CANN/GE反序列化接口创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考