文件上传与设备摄像头采集hackathon-starter 的 Multer 实战教程【免费下载链接】hackathon-starterA boilerplate for Node.js web applications项目地址: https://gitcode.com/gh_mirrors/ha/hackathon-starter在 Node.js 项目里实现文件上传Multer 是最常用的中间件方案。hackathon-starter 作为一套完整的 Node.js Web 应用脚手架内置了两个 Multer 实战案例一个是经典的/api/upload磁盘文件上传另一个是/ai/llm-camera设备摄像头采集图片并直接送给视觉大模型分析。本文带你读懂这两条完整链路从表单、中间件到错误处理一次学会 Multer 的两种典型用法。为什么选 Multer 处理 Node.js 文件上传浏览器提交的文件表单使用multipart/form-data编码Express 默认并不解析这种请求体。Multer 的工作就是把它解析出来并把文件落到两个地方之一磁盘存储multer({ dest: ... })文件写入指定目录适合存文件、给下载的场景内存存储multer.memoryStorage()文件内容以 Buffer 放在req.file.buffer适合上传后立即处理、不落盘的场景hackathon-starter 的两个案例恰好各用了一种非常适合对照学习。依赖在 package.json 中声明版本为multer ^2.4.0README.md 也把它列为核心功能之一。经典文件上传1MB 限制的磁盘存储示例打开/api/upload页面你看到的是 views/api/upload.pug 定义的标准表单表单声明enctypemultipart/form-data文件上传的必备属性隐藏字段_csrf携带 CSRF 令牌防跨站伪造文件输入框的字段名是myFile真正干活的是 controllers/api.js 中的uploadMiddlewareconst upload multer({ dest: path.join(__dirname, ../uploads), // 存到 uploads/ 目录 limits: { fileSize: 1024 * 1024 * 1 }, // 单文件上限 1MB }); upload.single(myFile)(req, res, (err) { if (err) req.multerError err; // 错误先挂到 req 上 next(); });这里有个值得学习的设计中间件不直接终止请求而是把 Multer 的错误记录到req.multerError交给后续处理器决定怎么提示用户。上传失败提示与超大文件错误的优雅处理postFileUploadcontrollers/api.js展示了完整的错误分支文件超过 1MB → Multer 抛出LIMIT_FILE_SIZE错误 → 页面显示File size is too large其他 Multer 错误 → 透出原始错误信息上传成功 → 绿色成功提示并 302 重定向回上传页每个分支都先调用req.session.save(...)再重定向。这是一个容易被忽略的细节如果用 Redis 或 Mongo 等异步会话存储不先保存会话重定向后新请求读不到 flash 消息提示就会丢闪。这套行为的正确性由端到端测试覆盖见 test/e2e-nokey/upload.e2e.test.js小文件上传成功、内容一致超过 1MB 报错提示恰好接近 1MB 仍可上传文本/JSON/CSV/XML 多种类型均可通过。设备摄像头采集Multer 内存存储的进阶玩法第二个案例更有意思/ai/llm-camera页面让浏览器调用设备摄像头拍照把图片直接喂给视觉大模型分析。前端逻辑在 views/ai/llm-camera.pugnavigator.mediaDevices.enumerateDevices()枚举设备上的摄像头getUserMedia()获取视频流在video上实时预览点击Capture时用canvas抓取一帧转成 JPEG Blob用FormData把图片以字段名imagePOST 到/ai/llm-camera后端则用 Multer 的内存存储接住图片controllers/ai.jsmulter({ storage: multer.memoryStorage(), limits: { fileSize: 10 * 1024 * 1024 }, // 10MB 上限 }).single(image);为什么用内存而不是磁盘因为这张照片不需要保存——它马上会被转成 Base64 Data URL 送给 Groq 视觉模型controllers/ai.js落盘反而浪费 IO还可能留下用户隐私数据。内存用完即弃是这类过路图片的最佳实践。中间件顺序与安全防护细节在 app.js 和路由注册处有两处值得注意的约定Multer 必须跑在 Lusca CSRF 校验之前/api/upload和/ai/llm-camera两条路径在全局 CSRF 中间件里被放行改由各自的 POST 路由末端再挂lusca({ csrf: true })单独校验因为 multipart 请求体解析和 CSRF 校验的顺序容易冲突。限流保护两个 POST 路由都挂了strictLimiter防止上传接口被滥用。页面级路由GET统一通过lusca({ csrf: true })保护表单里的_csrf隐藏字段与之配套。这套上传接口 限流 CSRF的组合拳可以直接照搬到你自己的项目里。关键文件速查清单文件作用controllers/api.js磁盘上传页面、中间件、成功/失败处理views/api/upload.pug上传表单multipart CSRFcontrollers/ai.js内存上传 Base64 视觉分析views/ai/llm-camera.pug摄像头枚举、预览、拍照前端逻辑app.js路由注册与中间件顺序test/e2e-nokey/upload.e2e.test.js上传功能的端到端测试小结通过 hackathon-starter 的两个案例你可以把 Multer 的用法浓缩成三条经验要存盘就用dest要现处理就用memoryStorage按文件的生命周期选型limits.fileSize一定要设并把LIMIT_FILE_SIZE等错误翻译成用户能看懂的提示上传接口记得组合限流与 CSRF 防护中间件顺序Multer 在前、CSRF 校验在后别搞反照着 AGENTS.md 和 AGENTS.md 中的功能速查表你可以快速定位这两个功能的完整上下文动手改造出自己的上传能力。【免费下载链接】hackathon-starterA boilerplate for Node.js web applications项目地址: https://gitcode.com/gh_mirrors/ha/hackathon-starter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 文件上传与设备摄像头采集：hackathon-starter 的 Multer 实战教程
文件上传与设备摄像头采集hackathon-starter 的 Multer 实战教程【免费下载链接】hackathon-starterA boilerplate for Node.js web applications项目地址: https://gitcode.com/gh_mirrors/ha/hackathon-starter在 Node.js 项目里实现文件上传Multer 是最常用的中间件方案。hackathon-starter 作为一套完整的 Node.js Web 应用脚手架内置了两个 Multer 实战案例一个是经典的/api/upload磁盘文件上传另一个是/ai/llm-camera设备摄像头采集图片并直接送给视觉大模型分析。本文带你读懂这两条完整链路从表单、中间件到错误处理一次学会 Multer 的两种典型用法。为什么选 Multer 处理 Node.js 文件上传浏览器提交的文件表单使用multipart/form-data编码Express 默认并不解析这种请求体。Multer 的工作就是把它解析出来并把文件落到两个地方之一磁盘存储multer({ dest: ... })文件写入指定目录适合存文件、给下载的场景内存存储multer.memoryStorage()文件内容以 Buffer 放在req.file.buffer适合上传后立即处理、不落盘的场景hackathon-starter 的两个案例恰好各用了一种非常适合对照学习。依赖在 package.json 中声明版本为multer ^2.4.0README.md 也把它列为核心功能之一。经典文件上传1MB 限制的磁盘存储示例打开/api/upload页面你看到的是 views/api/upload.pug 定义的标准表单表单声明enctypemultipart/form-data文件上传的必备属性隐藏字段_csrf携带 CSRF 令牌防跨站伪造文件输入框的字段名是myFile真正干活的是 controllers/api.js 中的uploadMiddlewareconst upload multer({ dest: path.join(__dirname, ../uploads), // 存到 uploads/ 目录 limits: { fileSize: 1024 * 1024 * 1 }, // 单文件上限 1MB }); upload.single(myFile)(req, res, (err) { if (err) req.multerError err; // 错误先挂到 req 上 next(); });这里有个值得学习的设计中间件不直接终止请求而是把 Multer 的错误记录到req.multerError交给后续处理器决定怎么提示用户。上传失败提示与超大文件错误的优雅处理postFileUploadcontrollers/api.js展示了完整的错误分支文件超过 1MB → Multer 抛出LIMIT_FILE_SIZE错误 → 页面显示File size is too large其他 Multer 错误 → 透出原始错误信息上传成功 → 绿色成功提示并 302 重定向回上传页每个分支都先调用req.session.save(...)再重定向。这是一个容易被忽略的细节如果用 Redis 或 Mongo 等异步会话存储不先保存会话重定向后新请求读不到 flash 消息提示就会丢闪。这套行为的正确性由端到端测试覆盖见 test/e2e-nokey/upload.e2e.test.js小文件上传成功、内容一致超过 1MB 报错提示恰好接近 1MB 仍可上传文本/JSON/CSV/XML 多种类型均可通过。设备摄像头采集Multer 内存存储的进阶玩法第二个案例更有意思/ai/llm-camera页面让浏览器调用设备摄像头拍照把图片直接喂给视觉大模型分析。前端逻辑在 views/ai/llm-camera.pugnavigator.mediaDevices.enumerateDevices()枚举设备上的摄像头getUserMedia()获取视频流在video上实时预览点击Capture时用canvas抓取一帧转成 JPEG Blob用FormData把图片以字段名imagePOST 到/ai/llm-camera后端则用 Multer 的内存存储接住图片controllers/ai.jsmulter({ storage: multer.memoryStorage(), limits: { fileSize: 10 * 1024 * 1024 }, // 10MB 上限 }).single(image);为什么用内存而不是磁盘因为这张照片不需要保存——它马上会被转成 Base64 Data URL 送给 Groq 视觉模型controllers/ai.js落盘反而浪费 IO还可能留下用户隐私数据。内存用完即弃是这类过路图片的最佳实践。中间件顺序与安全防护细节在 app.js 和路由注册处有两处值得注意的约定Multer 必须跑在 Lusca CSRF 校验之前/api/upload和/ai/llm-camera两条路径在全局 CSRF 中间件里被放行改由各自的 POST 路由末端再挂lusca({ csrf: true })单独校验因为 multipart 请求体解析和 CSRF 校验的顺序容易冲突。限流保护两个 POST 路由都挂了strictLimiter防止上传接口被滥用。页面级路由GET统一通过lusca({ csrf: true })保护表单里的_csrf隐藏字段与之配套。这套上传接口 限流 CSRF的组合拳可以直接照搬到你自己的项目里。关键文件速查清单文件作用controllers/api.js磁盘上传页面、中间件、成功/失败处理views/api/upload.pug上传表单multipart CSRFcontrollers/ai.js内存上传 Base64 视觉分析views/ai/llm-camera.pug摄像头枚举、预览、拍照前端逻辑app.js路由注册与中间件顺序test/e2e-nokey/upload.e2e.test.js上传功能的端到端测试小结通过 hackathon-starter 的两个案例你可以把 Multer 的用法浓缩成三条经验要存盘就用dest要现处理就用memoryStorage按文件的生命周期选型limits.fileSize一定要设并把LIMIT_FILE_SIZE等错误翻译成用户能看懂的提示上传接口记得组合限流与 CSRF 防护中间件顺序Multer 在前、CSRF 校验在后别搞反照着 AGENTS.md 和 AGENTS.md 中的功能速查表你可以快速定位这两个功能的完整上下文动手改造出自己的上传能力。【免费下载链接】hackathon-starterA boilerplate for Node.js web applications项目地址: https://gitcode.com/gh_mirrors/ha/hackathon-starter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考