后端前端【免费下载链接】uploadthingFile uploads for modern web devs项目地址https://gitcode.com/gh_mirrors/up/uploadthing点击查看免费下载本篇指南以 uploadthing 仓库的 changeset 变更记录.changeset/accept-mime-extensions.md为线索深入讲解客户端accept过滤机制的这次重要升级generateMimeTypes与generateClientDropzoneAccept在输出 MIME 类型的同时开始附带来自uploadthing/mime-types的已知文件扩展名。读完本文你将理解为什么仅含 MIME 的accept值会在部分浏览器/操作系统上失效掌握两个核心函数的输出格式与调用方式并能结合源码定位底层实现与测试验证。这次变更解决了什么问题HTMLinput typefile的accept属性和拖拽上传组件的accept配置是控制原生文件选择器可选项的第一道闸门。uploadthing 的客户端组件在渲染时会依据服务端FileRouter中定义的fileTypes如image、video、pdf自动生成accept值传给浏览器。但这里存在一个跨平台兼容性陷阱部分浏览器和操作系统最典型的是 Windows 平台上的 Chrome会忽略仅包含 MIME 类型的accept值。例如当你只提供application/java-archive时Windows Chrome 的原生文件选择器可能完全无视该过滤器直接回退为 All Files所有文件——这意味着用户理论上可以选中任何类型的文件过滤形同虚设。本次 changeset 记录涉及uploadthing/shared、uploadthing/react、uploadthing/vue、uploadthing/solid以及主包uploadthing均为patch级别更新给出的修复方案是Include file extensions alongside MIME types in clientacceptfilters.generateMimeTypesandgenerateClientDropzoneAcceptnow also emit known extensions fromuploadthing/mime-types(for example.jar), so the native file picker can filter correctly.即在accept过滤器中让文件扩展名与 MIME 类型并列输出双通道过滤确保文件选择器能正确筛选。扩展名从哪来uploadthing/mime-types数据表扩展名的数据源头是独立分包uploadthing/mime-types。这是一个从mime-types移植vendored而来、可在边缘运行时执行的 TypeScript 版本按application、audio、image、text、video、misc分类维护了完整的 MIME 类型 → 扩展名映射表例如在 application.ts 中application/java-archive: { source: apache, extensions: [jar, war, ear], },application/pdf对应[pdf]image/png对应[png]以此类推。包入口 index.ts 将各分类表合并为mimeTypes映射并暴露lookup、getTypes、getExtensions等查询函数同时通过 getter 延迟初始化内部映射以提升 tree-shaking 友好度避免把整张表打进客户端包。核心实现packages/shared/src/component-utils.ts两个被升级的函数都定义在共享包 packages/shared/src/component-utils.ts并统一从uploadthing/client对外 re-export见 packages/uploadthing/src/client.ts#L37-L52。扩展名查找助手extensionsForMime为兼顾 tree-shaking共享包按分类粒度导入各 MIME 表application、audio、image、text、video组装成mimeTables数组再由extensionsForMime根据 MIME 类型反查扩展名并统一加上.前缀component-utils.ts#L30-L51const extensionsForMime (mime: string): string[] { for (const table of mimeTables) { const entry table[mime]; if (entry) { return entry.extensions.map((ext) .${ext}); } } return []; };generateMimeTypes字符串形式的 accept该函数接受string[]文件类型列表或ExpandedRouteConfig路由配置对象返回string[]每一项是该类型对应的 MIME 与扩展名的逗号拼接字符串component-utils.ts#L53-L81pdf→application/pdf, .pdf含/的具体 MIME如application/java-archive→application/java-archive, .jar, .war, .ear通配大类image→image/*, image/png, image/jpeg, image/gif, image/webp, ...通配符加该分类下所有已知 MIME兼容不支持image/*的浏览器/OS列表中出现blob时直接返回空数组[]表示接受任意文件不设过滤。调用方将数组join(, )后赋给input typefile的accept属性。React 的UploadButton正是这样做的packages/react/src/components/button.tsx#L181-L204const inputProps useMemo( () ({ type: file, ref: fileInputRef, multiple, accept: generateMimeTypes(fileTypes).join(, ), onChange: (e: React.ChangeEventHTMLInputElement) { /* ... */ }, disabled, tabIndex: disabled ? -1 : 0, }), [$props, disabled, fileTypes, mode, multiple, uploadFiles], );Vue 的UploadButton组件同样采用generateMimeTypes(...).join(, )的方式生成accept见 packages/vue/src/components/button.tsx。generateClientDropzoneAccept对象形式的 accept该函数返回AcceptProp即Recordstring, string[]key 为 MIME 类型或image/*之类的通配符value 为该 MIME 对应的扩展名数组component-utils.ts#L83-L134// 输入 [application/java-archive] // 输出 { application/java-archive: [.jar, .war, .ear], }对于image等大类则会展开为image/*加上该分类下每个已知 MIME 各自对应的扩展名条目包含blob时返回空对象{}。React 的UploadDropzone将其直接作为accept配置传入packages/react/src/components/dropzone.tsx#L231Solid 与 Svelte 的UploadDropzone也走同一函数见 packages/solid/src/components/dropzone.tsx、packages/svelte/src/lib/component/UploadDropzone.svelte。扩展名如何参与拖拽校验dropzone-utils.ts扩展名不仅作用于原生文件选择器还参与拖拽上传时的文件接受判定。共享包中的 dropzone-utils.ts 实现了与react-dropzone/attr-accept同源的匹配逻辑accepts 函数L26-L47以.开头的条目 → 按文件名后缀匹配fileName.toLowerCase().endsWith(validType)以/*结尾的条目 → 按base MIME 类型匹配如image/*匹配所有image/...其余 → 按完整MIME 类型精确匹配。当generateClientDropzoneAccept输出{application/java-archive: [.jar, .war, .ear]}这类键值对后acceptPropAsAcceptAttrL154-L166会将其扁平化为逗号分隔的字符串application/java-archive,.jar,.war,.ear并剔除非法条目供拖拽层校验使用——即使浏览器无法识别 MIME也能通过扩展名兜底判断文件是否符合路由配置。测试验证仓库为这次行为变更补充了专门的单测位于 packages/shared/test/component-utils.test.tsgenerateMimeTypes对[application/java-archive]的输出同时包含application/java-archive、.jar、.war、.ear对[pdf]的输出包含application/pdf与.pdfL45-L55generateClientDropzoneAccept([application/java-archive])精确返回{ application/java-archive: [.jar, .war, .ear] }且经acceptPropAsAcceptAttr转换后同时包含 MIME 与.jarL58-L68blob存在时两个函数分别返回[]与{}保持接受任意文件语义不变L21-L24、L70-L73。另外通配大类展开所有已知 MIME的行为由来已久对应 shared CHANGELOG 6.7.5 中dump all matching mimetypes when using catch-all generic types的改动本次变更正是在此基础上补上了扩展名这一维度形成MIME 扩展名的双通道覆盖。对开发者意味着什么无需任何配置改动这是客户端库内部行为变更只要从uploadthing/client或各框架包使用UploadButton/UploadDropzone/useUploadThing生成的accept会自动带上扩展名。升级到包含该 patch 的版本即可生效。自定义场景同样受益如果你在项目里直接使用generateMimeTypes或generateClientDropzoneAccept例如为自研组件生成过滤条件现在返回值中会同时包含 MIME 与扩展名请确保消费端能正确处理以.开头的条目dropzone-utils的匹配逻辑即按此约定。blob的语义不变路由中包含blob表示允许任意文件两个函数会返回空值避免生成无效的过滤条件。两个函数的 API 签名与返回类型也可在官方 API 参考中核对docs/src/app/(docs)/api-reference/client/page.mdx#L199-L230/api-reference/client/page.mdx#L199-L230)。本次修复属于跨包协同的 patch 变更shared 提供实现、react/vue/solid 及主包消费是理解 uploadthing 客户端路由配置 → 文件过滤链路的一个典型切入点从FileRouter的fileTypes出发经generatePermittedFileTypes提取类型列表再到本文两个函数生成 MIME 与扩展名最终作用于原生文件选择器与拖拽校验全程可在 packages/shared/src/component-utils.ts 与 packages/shared/src/dropzone-utils.ts 中追踪验证。赞分享后端前端【免费下载链接】uploadthingFile uploads for modern web devs项目地址https://gitcode.com/gh_mirrors/up/uploadthing点击查看免费下载相关推荐dupeguru文件类型过滤终极指南自定义扩展名与MIME类型完全教程dupeguru文件类型过滤终极指南自定义扩展名与MIME类型完全教程 dupeguru是一款强大的重复文件查找工具能够帮助用户快速扫描并识别系统中的重复文桌面应用ThinkPHP Framework文件类型验证MIME类型与扩展名ThinkPHP Framework文件类型验证MIME类型与扩展名 你是否在开发上传功能时遇到过用户上传恶意文件的困扰是否担心过看似无害的.jpg文件其实后端Web框架终极Mole文件清理指南如何通过智能筛选释放Mac存储空间终极Mole文件清理指南如何通过智能筛选释放Mac存储空间 Mole是一款专为Mac用户设计的深度清理与优化工具能够帮助用户智能筛选和清理各类冗余文件释放CLI开发工具运维观测上一篇Siftly如何“看懂”书签里的每张图片OCR、视觉标签与重试策略完整剖析下一篇贴汁(TieZ)剪贴板管理器全景Rust极速内核AI协作多端同步一款工具解决9大办公痛点创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考