SuperAPI AI 工具集

tanstack-better-upload

编程与开发

查看项目

更新于 10-15 21:42

技能介绍

用途:在 TanStack Start 应用中实现文件直传 S3。客户端用 useUploadFiles / useUploadFile 拿到预签名 URL,再由 S3 接收 PUT,服务端通过 POST 路由配合 handleRequest(router) 处理请求。架构分两阶段:字节先上传到 S3,随后通过 createServerFn 写入应用数据库记录并失效相关查询。

主要能力:hooks 与上传进度;服务端 Router、route()、onBeforeUpload(鉴权、key 生成)与 metadata;S3 对象辅助方法 getObject、deleteObject、presignGetObject、putObject;react-dropzone 为可选依赖,仅用于多文件拖拽与批量进度,单文件选择器或直接调用 upload() 无需它。

使用方式:新增 routes/api/ 下的上传路由;客户端路由名需与 routes: { upload: route({...}) } 匹配,默认 API 路径为 /api/upload,可在 api 参数调整;处理器返回 handleRequest(request, router);鉴权在处理器或 onBeforeUpload 中执行,继承式鉴权用 endpointAuth.inherited(...);上传完成后用 useMutation({ mutationFn: createUploadFn }) 落库;上传后持久化放在 *.functions.ts 与 createServerFn 中,客户端组件不得导入 @better-upload/server;S3 访问使用 getConfiguredS3Client()(aws())与 @better-upload/server/helpers。

限制与注意:通过 GET /api/ 提供图片或视频预览时,开发环境需在 vite.config.ts 加 forwardApiRequestsPastViteAssetMiddleware()。资料未提供定价、平台支持范围与完整安装命令等细节,暂未提供。