前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载导读本文围绕 Uppy 仓库中的 examples/cdn 示例展开讲解如何在不使用 npm 与打包器的情况下通过 CDN 直接引入 Uppy 的 JavaScript 与 CSS在纯 HTML 页面中快速搭建一个带 Dashboard 界面的文件上传应用。读完本文你将掌握 CDN 引入的正确姿势、本地起服务运行示例的方法、Uppy 打包产物uppy.min.js与uppy.min.mjs的区别与选择以及如何将示例迁移到 tusd、S3 等真实生产上传端点。一、示例概览零构建、零依赖的上传页面examples/cdn/README.md 定位非常清晰这是一个演示如何通过 CDN 使用 Uppy的最小示例。它的核心价值在于——你甚至不需要npm install只需要一个能打开的 HTML 文件就能跑起来一个功能完整的上传器。该目录下只有两个关键文件index.html完整的示例页面通过script typemodule从 CDN 引入 Uppy 核心与插件package.json仅包含一个dev脚本用于在本地启动静态文件服务器依次尝试 Deno、Python 或 PHP。按 README 的说明运行方式有两种最简单的方式直接用浏览器打开index.html需要本地服务器时例如测试 Webcam 等依赖浏览器权限 API 的功能时更推荐在仓库根目录执行corepack yarn install corepack yarn workspace example-cdn dev其中corepack yarn workspace example-cdn dev实际执行的是 package.json 中的脚本deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts || python3 -m http.server || php -S localhost:8000这条命令依次尝试三种本地服务器优先 Deno 官方 std 库的file_server.ts失败则退回python3 -m http.server再退回php -S localhost:8000。因此 README 中标注的 requires Deno, Python, or PHP 正是对应这三个回落选项。命令默认在 8000 端口提供服务。提示dev脚本中使用||链式回落意味着只要前一个服务器成功启动后续命令不会执行三选一即可满足运行条件无需同时安装。二、示例页面逐行拆解CDN 引入的标准写法打开 index.html可以看到一个极其精简但结构完整的上传应用。下面按引入顺序拆解每一部分。2.1 引入样式link hrefhttps://releases.transloadit.com/uppy/v4.18.0/uppy.min.css relstylesheet /Uppy 的 CSS 通过link标签从releases.transloadit.com的版本化路径加载。版本号嵌入在 URL 中v4.18.0这一点与 Uppy 的 CDN 发布机制直接对应仓库中的 upload-to-cdn.js 将产物发布到形如uppy/v4.18.0/的目录每个版本独立存放、互不覆盖。2.2 引入 JavaScriptESM 方式script typemodule import { Dashboard, Tus, Uppy, Webcam, } from https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs ... /script这里使用typemodule的 ES 模块脚本从 CDN 导入uppy.min.mjs中的命名导出。.mjs后缀表示这是 ESM 格式的打包产物与之相对的是uppy.min.jsIIFE 格式挂载到globalThis.Uppy上见 bundle.mjs。两种产物的选择原则uppy.min.mjsESM适合现代浏览器 script typemodule支持命名导入是当前示例采用的方式也是官方推荐方式BUNDLE-README.md 中下载包内的示例同样用import { Uppy, Dashboard, Tus } from ./js/uppy/uppy.min.mjsuppy.min.jsIIFE适合传统script src直引引入后通过window.Uppy、window.Uppy.Dashboard访问无需import。两者均支持引入完整的 Uppy 全家桶。以 bundle.ts 为证打包产物内含 Uppy 核心Uppy、BasePlugin、UIPlugin、UI 插件Dashboard、DragDrop、StatusBar、ThumbnailGenerator等、采集器Webcam、Audio、ScreenCapture、上传器Tus、AwsS3、XHRUpload、Transloadit以及 Dropbox、Google Drive、OneDrive、Zoom 等远程源插件一个文件即覆盖绝大多数上传场景。2.3 初始化 Uppy 实例const uppy new Uppy({ debug: true, autoProceed: false }) .use(Dashboard, { trigger: #uppyModalOpener }) .use(Webcam, { target: Dashboard }) .use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })三段链式调用分别代表 Uppy 的三个核心概念new Uppy(...)创建核心实例。debug: true会在控制台输出详细调试日志可对应 core 包的 loggers.ts 的实现autoProceed: false表示用户选完文件后不自动开始上传而是等用户点击上传按钮方便用户先做元数据编辑、文件筛选等操作。.use(Dashboard, { trigger: #uppyModalOpener })挂载 Dashboard UI 插件。trigger选项把页面中iduppyModalOpener的按钮变成打开上传弹窗的开关——这正是 index.html 中button typebutton iduppyModalOpenerOpen Modal/button的作用。.use(Webcam, { target: Dashboard })启用摄像头采集插件并嵌套渲染进 Dashboardtarget: Dashboard表示把 Webcam 的界面嵌入 Dashboard 内部而非独立页面。.use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })配置上传协议与目标。示例使用 tus 可断点续传协议指向 Transloadit 的公开演示服务器tusd.tusdemo.net。注意该服务器上的文件会被定期清理仅用于演示不可用于生产。2.4 监听成功事件uppy.on(success, (fileCount) { console.log(${fileCount} files uploaded) })success事件在全部文件上传完成时触发回调接收本次上传的文件数量。这是 Uppy 事件系统的最简示范更细粒度的事件还包括upload-success单个文件上传成功回调携带(file, response)可从response.uploadURL拿到最终文件地址等BUNDLE-README.md 中展示了用upload-success把上传结果动态渲染到页面列表的完整写法。三、把示例改造成内联 Dashboard 与真实上传端点CDN 示例默认使用弹窗式Dashboard。如果你希望页面内直接嵌入上传区域只需调整Dashboard的配置将inline: true并指定一个容器target同时去掉triggerconst uppy new Uppy({ debug: true, autoProceed: false }) .use(Dashboard, { inline: true, target: .DashboardContainer, showProgressDetails: true, metaFields: [ { id: name, name: Name, placeholder: file name }, { id: caption, name: Caption, placeholder: describe what the image is about, }, ], }) .use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })对应地在 HTML 中准备一个容器div classDashboardContainer/div即可。上面的metaFields配置会让 Dashboard 在上传前弹出可填写文件名/说明的元数据表单——这些选项的完整说明见 BUNDLE-README.md 中内联 Dashboard 的完整示例。关于上传端点的选择BUNDLE-README.md 给出了清晰的建议路径生产环境不要使用tusd.tusdemo.net这类演示端点若已有 tusd 服务器或 S3 存储可分别使用Tus插件或AwsS3插件对接AwsS3也已被打包进 bundle.ts 的 CDN 产物中若后端是传统的 Nginx/Apache/Rails/PHP且只支持普通 multipart 表单上传则应改用XHRUpload插件——它模拟input typefile的传统提交方式现有后端无需改造即可接收。四、CDN 产物从哪来仓库内的构建与发布链路理解示例中 CDN URL 的结构有助于你判断自己项目应引用哪个版本。仓库中与 CDN 发布直接相关的实现有两处4.1 打包产物生成build-bundle.mjs打包脚本基于 esbuild将 bundle.ts聚合所有插件导出的入口打成两种产物dist/uppy.min.mjsESM 格式format: esm供import使用即示例页面所引用的文件dist/uppy.min.jsIIFE 格式通过 bundle.mjs 将全部导出挂到globalThis.Uppy供script直引。产物还附带 sourcemap便于线上调试。与此同时构建脚本会把 BUNDLE-README.md 复制为产物包的 README方便下载 zip 包的用户获得完整使用说明。4.2 版本化发布upload-to-cdn.js该脚本将构建产物上传到releases.transloadit.com并遵循严格的目录结构uppy/xxx → releases/uppy/xxx/ uppy → releases/uppy/v{version}/即 URL 形如https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs其中v4.18.0取自 package.json 中的version字段。脚本在发现目标版本目录已存在时默认拒绝重复上传除非显式加-- --force保证了 CDN 上每个版本路径的不可变性——这也是为什么 CDN 引用可以放心地长期固定某个版本号。五、从 CDN 示例出发的进阶路线CDN 方式是 Uppy 的快速通道但它不是唯一方式。官方推荐的生产实践见 BUNDLE-README.md是通过 npm/yarn 安装并按需引入配合 Webpack/Vite 等打包器做 tree-shaking从而产出只包含所需插件的最小体积包。仓库中其他示例正是这种路线的直接体现例如examples/react在 Vite React 应用中按需组合插件examples/vue、examples/sveltekit对应 Vue、Svelte 生态examples/nextjsNext.js App Router 场景。你可以根据项目技术栈选择对应的示例作为起点。若需要远程源Google Drive、Dropbox、Instagram 等即插件名带 (c) 标记的还需要部署服务端组件 Companion仓库实现见 packages/uppy/companion或使用托管了 Companion 与 tusd 的 Transloadit 服务。总结examples/cdn 是理解 Uppy零构建接入的最短路径一条link、一段import、三行插件配置即可获得完整的 Dashboard 上传体验。本文在 README 的两种运行方式基础上逐行拆解了 index.html 的完整代码语义说明了uppy.min.mjs与uppy.min.js两种 CDN 产物的选择依据并通过 build-bundle.mjs 与 upload-to-cdn.js 揭示了版本化 CDN URL 背后的构建与发布机制。无论是快速原型验证还是作为深入理解 Uppy 插件体系的入门样例这个示例都值得作为你的第一站。赞分享前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载相关推荐Perspective Examples 示例项目全览从 CDN 单文件到 VirtualServer 后端接入实战指南Perspective Examples 示例项目全览从 CDN 单文件到 VirtualServer 后端接入实战指南 导读 examples/ 目录是数据可视化数据分析流处理WebAssembly图表库Uppy 打包版Bundle快速上手指南从 CDN 引入到构建自有上传组件Uppy 打包版Bundle快速上手指南从 CDN 引入到构建自有上传组件 本篇指南以 Uppy 仓库中的 BUNDLE README.md https:前端UI组件后端Uppy Node.js使用 uppy/xhr-upload 将文件上传到本地文件系统的完整实战指南Uppy Node.js使用 uppy/xhr upload 将文件上传到本地文件系统的完整实战指南 导读 本指南基于 Uppy 仓库中的 exampl前端UI组件后端上一篇攻克Intel NPU加速库C API编译难题从0到1解决实战指南下一篇群晖NAS硬盘兼容性终极指南用Synology HDD db脚本完全解锁第三方硬盘支持创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/30 6:38:39 · 阅读 1.2k 使用 CDN 引入 Uppy 文件上传器：examples/cdn 示例的完整实战指南
前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载导读本文围绕 Uppy 仓库中的 examples/cdn 示例展开讲解如何在不使用 npm 与打包器的情况下通过 CDN 直接引入 Uppy 的 JavaScript 与 CSS在纯 HTML 页面中快速搭建一个带 Dashboard 界面的文件上传应用。读完本文你将掌握 CDN 引入的正确姿势、本地起服务运行示例的方法、Uppy 打包产物uppy.min.js与uppy.min.mjs的区别与选择以及如何将示例迁移到 tusd、S3 等真实生产上传端点。一、示例概览零构建、零依赖的上传页面examples/cdn/README.md 定位非常清晰这是一个演示如何通过 CDN 使用 Uppy的最小示例。它的核心价值在于——你甚至不需要npm install只需要一个能打开的 HTML 文件就能跑起来一个功能完整的上传器。该目录下只有两个关键文件index.html完整的示例页面通过script typemodule从 CDN 引入 Uppy 核心与插件package.json仅包含一个dev脚本用于在本地启动静态文件服务器依次尝试 Deno、Python 或 PHP。按 README 的说明运行方式有两种最简单的方式直接用浏览器打开index.html需要本地服务器时例如测试 Webcam 等依赖浏览器权限 API 的功能时更推荐在仓库根目录执行corepack yarn install corepack yarn workspace example-cdn dev其中corepack yarn workspace example-cdn dev实际执行的是 package.json 中的脚本deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts || python3 -m http.server || php -S localhost:8000这条命令依次尝试三种本地服务器优先 Deno 官方 std 库的file_server.ts失败则退回python3 -m http.server再退回php -S localhost:8000。因此 README 中标注的 requires Deno, Python, or PHP 正是对应这三个回落选项。命令默认在 8000 端口提供服务。提示dev脚本中使用||链式回落意味着只要前一个服务器成功启动后续命令不会执行三选一即可满足运行条件无需同时安装。二、示例页面逐行拆解CDN 引入的标准写法打开 index.html可以看到一个极其精简但结构完整的上传应用。下面按引入顺序拆解每一部分。2.1 引入样式link hrefhttps://releases.transloadit.com/uppy/v4.18.0/uppy.min.css relstylesheet /Uppy 的 CSS 通过link标签从releases.transloadit.com的版本化路径加载。版本号嵌入在 URL 中v4.18.0这一点与 Uppy 的 CDN 发布机制直接对应仓库中的 upload-to-cdn.js 将产物发布到形如uppy/v4.18.0/的目录每个版本独立存放、互不覆盖。2.2 引入 JavaScriptESM 方式script typemodule import { Dashboard, Tus, Uppy, Webcam, } from https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs ... /script这里使用typemodule的 ES 模块脚本从 CDN 导入uppy.min.mjs中的命名导出。.mjs后缀表示这是 ESM 格式的打包产物与之相对的是uppy.min.jsIIFE 格式挂载到globalThis.Uppy上见 bundle.mjs。两种产物的选择原则uppy.min.mjsESM适合现代浏览器 script typemodule支持命名导入是当前示例采用的方式也是官方推荐方式BUNDLE-README.md 中下载包内的示例同样用import { Uppy, Dashboard, Tus } from ./js/uppy/uppy.min.mjsuppy.min.jsIIFE适合传统script src直引引入后通过window.Uppy、window.Uppy.Dashboard访问无需import。两者均支持引入完整的 Uppy 全家桶。以 bundle.ts 为证打包产物内含 Uppy 核心Uppy、BasePlugin、UIPlugin、UI 插件Dashboard、DragDrop、StatusBar、ThumbnailGenerator等、采集器Webcam、Audio、ScreenCapture、上传器Tus、AwsS3、XHRUpload、Transloadit以及 Dropbox、Google Drive、OneDrive、Zoom 等远程源插件一个文件即覆盖绝大多数上传场景。2.3 初始化 Uppy 实例const uppy new Uppy({ debug: true, autoProceed: false }) .use(Dashboard, { trigger: #uppyModalOpener }) .use(Webcam, { target: Dashboard }) .use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })三段链式调用分别代表 Uppy 的三个核心概念new Uppy(...)创建核心实例。debug: true会在控制台输出详细调试日志可对应 core 包的 loggers.ts 的实现autoProceed: false表示用户选完文件后不自动开始上传而是等用户点击上传按钮方便用户先做元数据编辑、文件筛选等操作。.use(Dashboard, { trigger: #uppyModalOpener })挂载 Dashboard UI 插件。trigger选项把页面中iduppyModalOpener的按钮变成打开上传弹窗的开关——这正是 index.html 中button typebutton iduppyModalOpenerOpen Modal/button的作用。.use(Webcam, { target: Dashboard })启用摄像头采集插件并嵌套渲染进 Dashboardtarget: Dashboard表示把 Webcam 的界面嵌入 Dashboard 内部而非独立页面。.use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })配置上传协议与目标。示例使用 tus 可断点续传协议指向 Transloadit 的公开演示服务器tusd.tusdemo.net。注意该服务器上的文件会被定期清理仅用于演示不可用于生产。2.4 监听成功事件uppy.on(success, (fileCount) { console.log(${fileCount} files uploaded) })success事件在全部文件上传完成时触发回调接收本次上传的文件数量。这是 Uppy 事件系统的最简示范更细粒度的事件还包括upload-success单个文件上传成功回调携带(file, response)可从response.uploadURL拿到最终文件地址等BUNDLE-README.md 中展示了用upload-success把上传结果动态渲染到页面列表的完整写法。三、把示例改造成内联 Dashboard 与真实上传端点CDN 示例默认使用弹窗式Dashboard。如果你希望页面内直接嵌入上传区域只需调整Dashboard的配置将inline: true并指定一个容器target同时去掉triggerconst uppy new Uppy({ debug: true, autoProceed: false }) .use(Dashboard, { inline: true, target: .DashboardContainer, showProgressDetails: true, metaFields: [ { id: name, name: Name, placeholder: file name }, { id: caption, name: Caption, placeholder: describe what the image is about, }, ], }) .use(Tus, { endpoint: https://tusd.tusdemo.net/files/ })对应地在 HTML 中准备一个容器div classDashboardContainer/div即可。上面的metaFields配置会让 Dashboard 在上传前弹出可填写文件名/说明的元数据表单——这些选项的完整说明见 BUNDLE-README.md 中内联 Dashboard 的完整示例。关于上传端点的选择BUNDLE-README.md 给出了清晰的建议路径生产环境不要使用tusd.tusdemo.net这类演示端点若已有 tusd 服务器或 S3 存储可分别使用Tus插件或AwsS3插件对接AwsS3也已被打包进 bundle.ts 的 CDN 产物中若后端是传统的 Nginx/Apache/Rails/PHP且只支持普通 multipart 表单上传则应改用XHRUpload插件——它模拟input typefile的传统提交方式现有后端无需改造即可接收。四、CDN 产物从哪来仓库内的构建与发布链路理解示例中 CDN URL 的结构有助于你判断自己项目应引用哪个版本。仓库中与 CDN 发布直接相关的实现有两处4.1 打包产物生成build-bundle.mjs打包脚本基于 esbuild将 bundle.ts聚合所有插件导出的入口打成两种产物dist/uppy.min.mjsESM 格式format: esm供import使用即示例页面所引用的文件dist/uppy.min.jsIIFE 格式通过 bundle.mjs 将全部导出挂到globalThis.Uppy供script直引。产物还附带 sourcemap便于线上调试。与此同时构建脚本会把 BUNDLE-README.md 复制为产物包的 README方便下载 zip 包的用户获得完整使用说明。4.2 版本化发布upload-to-cdn.js该脚本将构建产物上传到releases.transloadit.com并遵循严格的目录结构uppy/xxx → releases/uppy/xxx/ uppy → releases/uppy/v{version}/即 URL 形如https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs其中v4.18.0取自 package.json 中的version字段。脚本在发现目标版本目录已存在时默认拒绝重复上传除非显式加-- --force保证了 CDN 上每个版本路径的不可变性——这也是为什么 CDN 引用可以放心地长期固定某个版本号。五、从 CDN 示例出发的进阶路线CDN 方式是 Uppy 的快速通道但它不是唯一方式。官方推荐的生产实践见 BUNDLE-README.md是通过 npm/yarn 安装并按需引入配合 Webpack/Vite 等打包器做 tree-shaking从而产出只包含所需插件的最小体积包。仓库中其他示例正是这种路线的直接体现例如examples/react在 Vite React 应用中按需组合插件examples/vue、examples/sveltekit对应 Vue、Svelte 生态examples/nextjsNext.js App Router 场景。你可以根据项目技术栈选择对应的示例作为起点。若需要远程源Google Drive、Dropbox、Instagram 等即插件名带 (c) 标记的还需要部署服务端组件 Companion仓库实现见 packages/uppy/companion或使用托管了 Companion 与 tusd 的 Transloadit 服务。总结examples/cdn 是理解 Uppy零构建接入的最短路径一条link、一段import、三行插件配置即可获得完整的 Dashboard 上传体验。本文在 README 的两种运行方式基础上逐行拆解了 index.html 的完整代码语义说明了uppy.min.mjs与uppy.min.js两种 CDN 产物的选择依据并通过 build-bundle.mjs 与 upload-to-cdn.js 揭示了版本化 CDN URL 背后的构建与发布机制。无论是快速原型验证还是作为深入理解 Uppy 插件体系的入门样例这个示例都值得作为你的第一站。赞分享前端UI组件后端【免费下载链接】uppyThe next open source file uploader for web browsers :dog:项目地址https://gitcode.com/gh_mirrors/up/uppy点击查看免费下载相关推荐Perspective Examples 示例项目全览从 CDN 单文件到 VirtualServer 后端接入实战指南Perspective Examples 示例项目全览从 CDN 单文件到 VirtualServer 后端接入实战指南 导读 examples/ 目录是数据可视化数据分析流处理WebAssembly图表库Uppy 打包版Bundle快速上手指南从 CDN 引入到构建自有上传组件Uppy 打包版Bundle快速上手指南从 CDN 引入到构建自有上传组件 本篇指南以 Uppy 仓库中的 BUNDLE README.md https:前端UI组件后端Uppy Node.js使用 uppy/xhr-upload 将文件上传到本地文件系统的完整实战指南Uppy Node.js使用 uppy/xhr upload 将文件上传到本地文件系统的完整实战指南 导读 本指南基于 Uppy 仓库中的 exampl前端UI组件后端上一篇攻克Intel NPU加速库C API编译难题从0到1解决实战指南下一篇群晖NAS硬盘兼容性终极指南用Synology HDD db脚本完全解锁第三方硬盘支持创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考