简介这份资源面向需要在Java Web项目中实现手机摄像头拍照并上传的开发者尤其适合使用JSP技术栈、关注微信生态集成的初中级工程师。它解决的是移动端浏览器调用摄像头、图片采集后上传至阿里云服务器的完整链路问题描述中标注亲测可用可直接作为项目参考或二次开发基础。压缩包共130个文件约13.16MB以36个jar依赖库、33个class编译文件、31个java源码为主另含10个png与2个jpg图片资源、3个xml配置、3个js脚本及2个jsp页面结构上兼顾源码阅读与直接部署。内容涉及微信JSSDK签名、消息加解密、HTTP请求封装、令牌管理等模块便于理解拍照上传与微信接口的衔接方式。目前已有252人学习下载适合想快速搭建拍照上传功能或研究微信网页开发的读者参考借鉴。1. JSP调用摄像头拍照上传服务器从浏览器权限到磁盘落地的完整链路很多做 Java Web 的同学第一次接到「网页拍照上传」需求时脑子里第一反应是new FileInputStream或者Runtime.exec去调本地摄像头结果部署到服务器上直接翻车——服务器根本没有摄像头浏览器也不允许网页随意访问硬件。这个标题真正要解决的问题是在 JSP 页面里通过浏览器提供的媒体接口唤起用户本机摄像头把画面截成图片再通过 HTTP 表单或异步请求传到后端 Servlet最终落到服务器磁盘或对象存储。它适合做考勤抓拍、在线证件照、工单现场取证、教务系统人像采集这类场景。核心难点不在 JSP 本身而在浏览器权限、视频流截帧、Base64 与二进制互转、以及服务器端文件落地的路径安全。下面按「先跑通最小链路再补参数和坑」的顺序拆开讲。2. 浏览器端取流与截帧JSP 页面里怎么把摄像头画面变成可上传的数据2.1 为什么不能直接在 JSP 里写 Java 调摄像头JSP 本质是服务端模板编译后跑在 Tomcat、Jetty 这类容器里执行环境是服务器操作系统。服务器通常放在机房或云上没有物理摄像头即使有也不属于当前访问网页的用户。所以「JSP 调用摄像头」这个说法要拆成两层JSP 负责输出 HTML 和 JavaScriptJavaScript 在用户浏览器里调用navigator.mediaDevices.getUserMedia拿到视频流再把某一帧画到 canvas 上导出图片数据最后把数据提交给 JSP 背后的 Servlet。这个分工定错了后面全是白费功夫。常见做法是在 JSP 里放一个video预览、一个canvas做截帧、一个隐藏input存 Base64 或 Blob。用户点「拍照」时JS 把 video 当前帧绘制到 canvas再调toDataURL或toBlob拿到图片。注意getUserMedia只在安全上下文可用也就是https://或localhost。局域网用http://192.168.x.x访问时Chrome 会直接拒绝控制台报navigator.mediaDevices is undefined这是新手最常见的翻车点。2.2 最小可运行页面video canvas 拍照按钮下面这段可以直接放进camera.jsp的body里配合后面的 Servlet 就能跑通整条链路。!-- camera.jsp 浏览器端取流与截帧 -- video idpreview autoplay playsinline width480 height360/video canvas idsnap width480 height360 styledisplay:none/canvas button idbtnOpen打开摄像头/button button idbtnShot拍照并上传/button img idthumb alt预览 / script const video document.getElementById(preview); const canvas document.getElementById(snap); const ctx canvas.getContext(2d); // 打开摄像头优先前置分辨率约束到 640x480 降低上传体积 document.getElementById(btnOpen).onclick async () { try { const stream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: user }, audio: false }); video.srcObject stream; } catch (e) { alert(无法访问摄像头 e.name); // NotAllowedError 表示用户拒绝 } }; // 拍照把当前帧画到 canvas再转成 dataURL document.getElementById(btnShot).onclick () { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const dataUrl canvas.toDataURL(image/jpeg, 0.85); // 0.85 质量体积和清晰度折中 document.getElementById(thumb).src dataUrl; upload(dataUrl); }; // 上传用 fetch 发 JSON避免表单编码把 Base64 里的 / 弄乱 async function upload(dataUrl) { const resp await fetch(UploadServlet, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: dataUrl }) }); const text await resp.text(); console.log(服务端返回, text); } /script逻辑说明getUserMedia的video约束里width/height用ideal而不是exact这样设备不支持指定分辨率时浏览器会自动降级不会直接抛OverconstrainedError。facingMode: user在手机上优先前置桌面端一般忽略。toDataURL(image/jpeg, 0.85)第二个参数是 JPEG 质量范围 0 到 1设 0.85 通常能把 640x480 的图压到 40KB 到 80KB再高对证件类场景意义不大。上传用application/json而不是multipart/form-data是因为 Base64 字符串里含、/、走 URL 编码表单时如果后端没正确解码图片会损坏这是血泪经验。2.3 参数怎么调分辨率、质量、格式三者的取舍参数常用值影响建议video.width/height640x480越大越清晰上传越慢人像采集 640 够用证件类可到 1280toDataURL 质量0.8~0.9越低体积越小噪点越明显0.85 是体积与观感的平衡点图片格式image/jpegPNG 体积大但无损照片用 JPEG需要透明通道才用 PNG上传方式fetch JSON比表单更可控大图可改 Blob FormData 省 Base64 膨胀Base64 会把原始二进制放大约 33%如果对流量敏感可以改用canvas.toBlob拿到 Blob再用FormData上传后端用Part接收。但 Base64 的好处是能直接塞进 JSON前后端调试直观小图场景我更倾向 Base64。3. 服务端落地Servlet 怎么把 Base64 安全地写成服务器上的图片文件3.1 接收与解码Base64 去头、校验、写盘浏览器传来的 dataURL 形如data:image/jpeg;base64,/9j/4AAQ...服务端第一步是把逗号后面的纯 Base64 取出来用Base64.getDecoder()解码成字节数组。不要用sun.misc.BASE64Decoder那是内部 API高版本 JDK 会警告甚至移除。下面是一个最小 Servlet。// UploadServlet.java 接收 Base64 并落盘 WebServlet(/UploadServlet) public class UploadServlet extends HttpServlet { // 上传根目录建议放在 webapp 之外避免被直接 URL 访问 private static final String UPLOAD_DIR /data/upload/; Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { req.setCharacterEncoding(UTF-8); resp.setContentType(text/plain;charsetUTF-8); // 读取 JSON 请求体 StringBuilder sb new StringBuilder(); try (BufferedReader r req.getReader()) { String line; while ((line r.readLine()) ! null) sb.append(line); } String body sb.toString(); // 极简提取 image 字段生产环境建议用 Jackson/Gson String dataUrl body.replaceAll(.*\image\\\s*:\\s*\(.*?)\.*, $1); if (!dataUrl.startsWith(data:image/)) { resp.getWriter().write(FAIL:not image); return; } // 去掉 data:image/jpeg;base64, 前缀 String base64 dataUrl.substring(dataUrl.indexOf(,) 1); byte[] imgBytes; try { imgBytes Base64.getDecoder().decode(base64); } catch (IllegalArgumentException e) { resp.getWriter().write(FAIL:bad base64); return; } // 限制大小防止内存被打爆 if (imgBytes.length 5 * 1024 * 1024) { resp.getWriter().write(FAIL:too large); return; } // 生成不冲突的文件名只保留扩展名白名单 String ext dataUrl.contains(image/png) ? .png : .jpg; String name UUID.randomUUID().toString().replace(-, ) ext; File dir new File(UPLOAD_DIR); if (!dir.exists()) dir.mkdirs(); File target new File(dir, name); try (FileOutputStream out new FileOutputStream(target)) { out.write(imgBytes); } resp.getWriter().write(OK: name); } }逻辑说明req.setCharacterEncoding(UTF-8)必须在读 body 之前调用否则中文路径或字段会乱码。文件名用 UUID 而不是用户传来的名字是为了防目录穿越用户如果传../../web.xml这种名字直接拼路径会把服务器配置文件覆盖掉。扩展名只从 MIME 前缀推断不信任前端传的任意字符串。大小限制 5MB 是经验值640x480 的 JPEG 通常不到 100KB留足余量又能挡住恶意大包。3.2 存储路径与访问方式为什么不要直接存进 webapp把图片存到webapp/upload/下好处是能直接通过http://host/upload/xxx.jpg访问坏处是重新部署 war 包时整个目录可能被清掉而且如果上传逻辑有漏洞攻击者能传 JSP 文件进去直接执行。常见做法是存到 webapp 之外的独立目录比如/data/upload/再写一个ImageServlet按文件名读文件流回给浏览器这样既能做权限校验又能控制 Content-Type。// ImageServlet.java 按文件名安全读取图片 WebServlet(/img/*) public class ImageServlet extends HttpServlet { private static final String UPLOAD_DIR /data/upload/; Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { String name req.getPathInfo().substring(1); // 只允许字母数字和点挡住 ../ 和子目录 if (!name.matches([a-zA-Z0-9]\\.(jpg|png))) { resp.sendError(400); return; } File f new File(UPLOAD_DIR, name); if (!f.exists()) { resp.sendError(404); return; } resp.setContentType(name.endsWith(.png) ? image/png : image/jpeg); try (FileInputStream in new FileInputStream(f); OutputStream out resp.getOutputStream()) { byte[] buf new byte[8192]; int n; while ((n in.read(buf)) ! -1) out.write(buf, 0, n); } } }正则[a-zA-Z0-9]\.(jpg|png)是关键它把..%2f这类编码穿越挡在门外。如果业务需要子目录也要先规范化路径再判断是否落在根目录内不能直接拼。3.3 部署与联调Tomcat 下跑通整条链路把camera.jsp、UploadServlet、ImageServlet放进同一个 web 应用web.xml里如果用了WebServlet注解就不需要额外配置。启动 Tomcat 后用https://或localhost访问camera.jsp点「打开摄像头」应看到实时画面点「拍照并上传」后控制台打印OK:xxxx.jpg再访问/img/xxxx.jpg能看到图片。如果页面在局域网用 IP 访问浏览器会拦截摄像头这是安全上下文限制不是代码问题。联调阶段可以先用localhost验证逻辑上线再配证书。4. 避坑与排查JSP 拍照上传最常见的 5 个翻车现场4.1 现象控制台报navigator.mediaDevices is undefined原因页面不是通过https://或localhost打开的浏览器把getUserMedia藏起来了。局域网 IP、http://域名都会触发。解决本地开发用localhost线上必须配 TLS 证书如果只是内网演示可以在 Chrome 启动参数里临时把某个源加入白名单但不要把这个做法带到生产。4.2 现象拍照后上传成功但服务器上的图片打不开提示损坏原因Base64 在传输过程中被 URL 编码或表单编码改动了变成空格、/被转义。解决上传用application/json或multipart/form-data不要用application/x-www-form-urlencoded直接塞 Base64。后端解码前先确认字符串里没有空格必要时把空格替换回。4.3 现象OutOfMemoryError或 Tomcat 卡死原因一次性把大图 Base64 读进StringBuilder或者没限制上传大小攻击者传几十 MB 的图直接把堆打满。解决在 Servlet 里先判断Content-Length超过阈值直接拒绝读 body 用流式处理或限制最大长度imgBytes.length再做一次兜底校验。Tomcat 的maxPostSize也可以配合设置。4.4 现象图片存进去了但通过 URL 访问 404原因存到了 webapp 之外的目录却没有对应的读取 Servlet或者ImageServlet的路径映射和实际访问路径不一致。解决确认WebServlet(/img/*)与访问的/img/xxx.jpg匹配getPathInfo()返回的是/xxx.jpg截取时注意去掉前导斜杠。文件权限也要检查Tomcat 运行用户必须对上传目录有读写权限。4.5 现象手机浏览器上画面旋转了 90 度原因手机摄像头传感器方向与页面方向不一致video元素按原始方向渲染canvas 截帧也按原始方向。解决读取video.videoWidth/videoHeight判断横竖必要时在 canvas 上做旋转绘制或者用facingMode和环境光信息做简单判断。这个坑在考勤、证件照场景特别明显上线前一定要用真机测。5. 进阶技巧把拍照上传做成可复用的组件并验证图片真实性5.1 封装成可配置的 JS 组件把取流、截帧、上传封装成一个函数参数包括分辨率、质量、上传地址、成功回调页面里只留一个容器和按钮。这样同一套代码能复用到多个 JSP 页面不用每次复制粘贴。// camera-upload.js 可复用组件 function initCameraUpload(opts) { const cfg Object.assign({ videoId: preview, canvasId: snap, width: 640, height: 480, quality: 0.85, uploadUrl: UploadServlet, onSuccess: null }, opts); const video document.getElementById(cfg.videoId); const canvas document.getElementById(cfg.canvasId); canvas.width cfg.width; canvas.height cfg.height; const ctx canvas.getContext(2d); return { async open() { const stream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: cfg.width }, height: { ideal: cfg.height } }, audio: false }); video.srcObject stream; }, async shoot() { ctx.drawImage(video, 0, 0, cfg.width, cfg.height); const dataUrl canvas.toDataURL(image/jpeg, cfg.quality); const resp await fetch(cfg.uploadUrl, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: dataUrl }) }); const result await resp.text(); if (cfg.onSuccess) cfg.onSuccess(result, dataUrl); return result; } }; }参数说明width/height决定 canvas 尺寸和截帧分辨率quality控制 JPEG 压缩率uploadUrl让组件能指向不同后端onSuccess把服务端返回的文件名和本地预览图一起交给调用方。这样页面逻辑和采集逻辑解耦后续换存储方案只改后端。5.2 服务端校验别让「拍照」变成「传任意图」前端拍照上传有个天然漏洞用户完全可以不走摄像头直接构造一个 Base64 图片提交。如果业务要求必须是实时拍摄服务端能做的校验有限但可以加几道门槛检查图片尺寸是否符合约定范围、检查 EXIF 里是否有拍摄时间、结合会话里的时间戳判断提交间隔是否过短。更严格的做法是前端在拍照时把当前时间戳画进 canvas 角落服务端用 OCR 或简单像素比对验证但这会牺牲体验。我的习惯是普通场景只做格式和大小校验涉及身份核验的场景才上时间戳水印并且把水印位置和字体固定方便后续人工复核。5.3 验证清单上线前逐项过一遍检查项通过标准HTTPS 访问页面地址是 https 或 localhost权限拒绝分支用户点拒绝后页面有提示不白屏大图拦截超过 5MB 的请求被服务端拒绝文件名安全上传目录里不会出现../相关文件图片可访问通过 ImageServlet 能正常显示手机方向真机拍照后图片方向正确这套方案我从早期项目一直用到现在的工单系统最大的体会是浏览器端的问题永远比服务端多而服务端的坑基本都集中在路径和大小上。每次上线前把上面这张表过一遍能省掉大半的返工。希望帮到你。本文还有配套的精品资源点击获取
简介这份资源面向需要在Java Web项目中实现手机摄像头拍照并上传的开发者尤其适合使用JSP技术栈、关注微信生态集成的初中级工程师。它解决的是移动端浏览器调用摄像头、图片采集后上传至阿里云服务器的完整链路问题描述中标注亲测可用可直接作为项目参考或二次开发基础。压缩包共130个文件约13.16MB以36个jar依赖库、33个class编译文件、31个java源码为主另含10个png与2个jpg图片资源、3个xml配置、3个js脚本及2个jsp页面结构上兼顾源码阅读与直接部署。内容涉及微信JSSDK签名、消息加解密、HTTP请求封装、令牌管理等模块便于理解拍照上传与微信接口的衔接方式。目前已有252人学习下载适合想快速搭建拍照上传功能或研究微信网页开发的读者参考借鉴。1. JSP调用摄像头拍照上传服务器从浏览器权限到磁盘落地的完整链路很多做 Java Web 的同学第一次接到「网页拍照上传」需求时脑子里第一反应是new FileInputStream或者Runtime.exec去调本地摄像头结果部署到服务器上直接翻车——服务器根本没有摄像头浏览器也不允许网页随意访问硬件。这个标题真正要解决的问题是在 JSP 页面里通过浏览器提供的媒体接口唤起用户本机摄像头把画面截成图片再通过 HTTP 表单或异步请求传到后端 Servlet最终落到服务器磁盘或对象存储。它适合做考勤抓拍、在线证件照、工单现场取证、教务系统人像采集这类场景。核心难点不在 JSP 本身而在浏览器权限、视频流截帧、Base64 与二进制互转、以及服务器端文件落地的路径安全。下面按「先跑通最小链路再补参数和坑」的顺序拆开讲。2. 浏览器端取流与截帧JSP 页面里怎么把摄像头画面变成可上传的数据2.1 为什么不能直接在 JSP 里写 Java 调摄像头JSP 本质是服务端模板编译后跑在 Tomcat、Jetty 这类容器里执行环境是服务器操作系统。服务器通常放在机房或云上没有物理摄像头即使有也不属于当前访问网页的用户。所以「JSP 调用摄像头」这个说法要拆成两层JSP 负责输出 HTML 和 JavaScriptJavaScript 在用户浏览器里调用navigator.mediaDevices.getUserMedia拿到视频流再把某一帧画到 canvas 上导出图片数据最后把数据提交给 JSP 背后的 Servlet。这个分工定错了后面全是白费功夫。常见做法是在 JSP 里放一个video预览、一个canvas做截帧、一个隐藏input存 Base64 或 Blob。用户点「拍照」时JS 把 video 当前帧绘制到 canvas再调toDataURL或toBlob拿到图片。注意getUserMedia只在安全上下文可用也就是https://或localhost。局域网用http://192.168.x.x访问时Chrome 会直接拒绝控制台报navigator.mediaDevices is undefined这是新手最常见的翻车点。2.2 最小可运行页面video canvas 拍照按钮下面这段可以直接放进camera.jsp的body里配合后面的 Servlet 就能跑通整条链路。!-- camera.jsp 浏览器端取流与截帧 -- video idpreview autoplay playsinline width480 height360/video canvas idsnap width480 height360 styledisplay:none/canvas button idbtnOpen打开摄像头/button button idbtnShot拍照并上传/button img idthumb alt预览 / script const video document.getElementById(preview); const canvas document.getElementById(snap); const ctx canvas.getContext(2d); // 打开摄像头优先前置分辨率约束到 640x480 降低上传体积 document.getElementById(btnOpen).onclick async () { try { const stream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 640 }, height: { ideal: 480 }, facingMode: user }, audio: false }); video.srcObject stream; } catch (e) { alert(无法访问摄像头 e.name); // NotAllowedError 表示用户拒绝 } }; // 拍照把当前帧画到 canvas再转成 dataURL document.getElementById(btnShot).onclick () { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const dataUrl canvas.toDataURL(image/jpeg, 0.85); // 0.85 质量体积和清晰度折中 document.getElementById(thumb).src dataUrl; upload(dataUrl); }; // 上传用 fetch 发 JSON避免表单编码把 Base64 里的 / 弄乱 async function upload(dataUrl) { const resp await fetch(UploadServlet, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: dataUrl }) }); const text await resp.text(); console.log(服务端返回, text); } /script逻辑说明getUserMedia的video约束里width/height用ideal而不是exact这样设备不支持指定分辨率时浏览器会自动降级不会直接抛OverconstrainedError。facingMode: user在手机上优先前置桌面端一般忽略。toDataURL(image/jpeg, 0.85)第二个参数是 JPEG 质量范围 0 到 1设 0.85 通常能把 640x480 的图压到 40KB 到 80KB再高对证件类场景意义不大。上传用application/json而不是multipart/form-data是因为 Base64 字符串里含、/、走 URL 编码表单时如果后端没正确解码图片会损坏这是血泪经验。2.3 参数怎么调分辨率、质量、格式三者的取舍参数常用值影响建议video.width/height640x480越大越清晰上传越慢人像采集 640 够用证件类可到 1280toDataURL 质量0.8~0.9越低体积越小噪点越明显0.85 是体积与观感的平衡点图片格式image/jpegPNG 体积大但无损照片用 JPEG需要透明通道才用 PNG上传方式fetch JSON比表单更可控大图可改 Blob FormData 省 Base64 膨胀Base64 会把原始二进制放大约 33%如果对流量敏感可以改用canvas.toBlob拿到 Blob再用FormData上传后端用Part接收。但 Base64 的好处是能直接塞进 JSON前后端调试直观小图场景我更倾向 Base64。3. 服务端落地Servlet 怎么把 Base64 安全地写成服务器上的图片文件3.1 接收与解码Base64 去头、校验、写盘浏览器传来的 dataURL 形如data:image/jpeg;base64,/9j/4AAQ...服务端第一步是把逗号后面的纯 Base64 取出来用Base64.getDecoder()解码成字节数组。不要用sun.misc.BASE64Decoder那是内部 API高版本 JDK 会警告甚至移除。下面是一个最小 Servlet。// UploadServlet.java 接收 Base64 并落盘 WebServlet(/UploadServlet) public class UploadServlet extends HttpServlet { // 上传根目录建议放在 webapp 之外避免被直接 URL 访问 private static final String UPLOAD_DIR /data/upload/; Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { req.setCharacterEncoding(UTF-8); resp.setContentType(text/plain;charsetUTF-8); // 读取 JSON 请求体 StringBuilder sb new StringBuilder(); try (BufferedReader r req.getReader()) { String line; while ((line r.readLine()) ! null) sb.append(line); } String body sb.toString(); // 极简提取 image 字段生产环境建议用 Jackson/Gson String dataUrl body.replaceAll(.*\image\\\s*:\\s*\(.*?)\.*, $1); if (!dataUrl.startsWith(data:image/)) { resp.getWriter().write(FAIL:not image); return; } // 去掉 data:image/jpeg;base64, 前缀 String base64 dataUrl.substring(dataUrl.indexOf(,) 1); byte[] imgBytes; try { imgBytes Base64.getDecoder().decode(base64); } catch (IllegalArgumentException e) { resp.getWriter().write(FAIL:bad base64); return; } // 限制大小防止内存被打爆 if (imgBytes.length 5 * 1024 * 1024) { resp.getWriter().write(FAIL:too large); return; } // 生成不冲突的文件名只保留扩展名白名单 String ext dataUrl.contains(image/png) ? .png : .jpg; String name UUID.randomUUID().toString().replace(-, ) ext; File dir new File(UPLOAD_DIR); if (!dir.exists()) dir.mkdirs(); File target new File(dir, name); try (FileOutputStream out new FileOutputStream(target)) { out.write(imgBytes); } resp.getWriter().write(OK: name); } }逻辑说明req.setCharacterEncoding(UTF-8)必须在读 body 之前调用否则中文路径或字段会乱码。文件名用 UUID 而不是用户传来的名字是为了防目录穿越用户如果传../../web.xml这种名字直接拼路径会把服务器配置文件覆盖掉。扩展名只从 MIME 前缀推断不信任前端传的任意字符串。大小限制 5MB 是经验值640x480 的 JPEG 通常不到 100KB留足余量又能挡住恶意大包。3.2 存储路径与访问方式为什么不要直接存进 webapp把图片存到webapp/upload/下好处是能直接通过http://host/upload/xxx.jpg访问坏处是重新部署 war 包时整个目录可能被清掉而且如果上传逻辑有漏洞攻击者能传 JSP 文件进去直接执行。常见做法是存到 webapp 之外的独立目录比如/data/upload/再写一个ImageServlet按文件名读文件流回给浏览器这样既能做权限校验又能控制 Content-Type。// ImageServlet.java 按文件名安全读取图片 WebServlet(/img/*) public class ImageServlet extends HttpServlet { private static final String UPLOAD_DIR /data/upload/; Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { String name req.getPathInfo().substring(1); // 只允许字母数字和点挡住 ../ 和子目录 if (!name.matches([a-zA-Z0-9]\\.(jpg|png))) { resp.sendError(400); return; } File f new File(UPLOAD_DIR, name); if (!f.exists()) { resp.sendError(404); return; } resp.setContentType(name.endsWith(.png) ? image/png : image/jpeg); try (FileInputStream in new FileInputStream(f); OutputStream out resp.getOutputStream()) { byte[] buf new byte[8192]; int n; while ((n in.read(buf)) ! -1) out.write(buf, 0, n); } } }正则[a-zA-Z0-9]\.(jpg|png)是关键它把..%2f这类编码穿越挡在门外。如果业务需要子目录也要先规范化路径再判断是否落在根目录内不能直接拼。3.3 部署与联调Tomcat 下跑通整条链路把camera.jsp、UploadServlet、ImageServlet放进同一个 web 应用web.xml里如果用了WebServlet注解就不需要额外配置。启动 Tomcat 后用https://或localhost访问camera.jsp点「打开摄像头」应看到实时画面点「拍照并上传」后控制台打印OK:xxxx.jpg再访问/img/xxxx.jpg能看到图片。如果页面在局域网用 IP 访问浏览器会拦截摄像头这是安全上下文限制不是代码问题。联调阶段可以先用localhost验证逻辑上线再配证书。4. 避坑与排查JSP 拍照上传最常见的 5 个翻车现场4.1 现象控制台报navigator.mediaDevices is undefined原因页面不是通过https://或localhost打开的浏览器把getUserMedia藏起来了。局域网 IP、http://域名都会触发。解决本地开发用localhost线上必须配 TLS 证书如果只是内网演示可以在 Chrome 启动参数里临时把某个源加入白名单但不要把这个做法带到生产。4.2 现象拍照后上传成功但服务器上的图片打不开提示损坏原因Base64 在传输过程中被 URL 编码或表单编码改动了变成空格、/被转义。解决上传用application/json或multipart/form-data不要用application/x-www-form-urlencoded直接塞 Base64。后端解码前先确认字符串里没有空格必要时把空格替换回。4.3 现象OutOfMemoryError或 Tomcat 卡死原因一次性把大图 Base64 读进StringBuilder或者没限制上传大小攻击者传几十 MB 的图直接把堆打满。解决在 Servlet 里先判断Content-Length超过阈值直接拒绝读 body 用流式处理或限制最大长度imgBytes.length再做一次兜底校验。Tomcat 的maxPostSize也可以配合设置。4.4 现象图片存进去了但通过 URL 访问 404原因存到了 webapp 之外的目录却没有对应的读取 Servlet或者ImageServlet的路径映射和实际访问路径不一致。解决确认WebServlet(/img/*)与访问的/img/xxx.jpg匹配getPathInfo()返回的是/xxx.jpg截取时注意去掉前导斜杠。文件权限也要检查Tomcat 运行用户必须对上传目录有读写权限。4.5 现象手机浏览器上画面旋转了 90 度原因手机摄像头传感器方向与页面方向不一致video元素按原始方向渲染canvas 截帧也按原始方向。解决读取video.videoWidth/videoHeight判断横竖必要时在 canvas 上做旋转绘制或者用facingMode和环境光信息做简单判断。这个坑在考勤、证件照场景特别明显上线前一定要用真机测。5. 进阶技巧把拍照上传做成可复用的组件并验证图片真实性5.1 封装成可配置的 JS 组件把取流、截帧、上传封装成一个函数参数包括分辨率、质量、上传地址、成功回调页面里只留一个容器和按钮。这样同一套代码能复用到多个 JSP 页面不用每次复制粘贴。// camera-upload.js 可复用组件 function initCameraUpload(opts) { const cfg Object.assign({ videoId: preview, canvasId: snap, width: 640, height: 480, quality: 0.85, uploadUrl: UploadServlet, onSuccess: null }, opts); const video document.getElementById(cfg.videoId); const canvas document.getElementById(cfg.canvasId); canvas.width cfg.width; canvas.height cfg.height; const ctx canvas.getContext(2d); return { async open() { const stream await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: cfg.width }, height: { ideal: cfg.height } }, audio: false }); video.srcObject stream; }, async shoot() { ctx.drawImage(video, 0, 0, cfg.width, cfg.height); const dataUrl canvas.toDataURL(image/jpeg, cfg.quality); const resp await fetch(cfg.uploadUrl, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: dataUrl }) }); const result await resp.text(); if (cfg.onSuccess) cfg.onSuccess(result, dataUrl); return result; } }; }参数说明width/height决定 canvas 尺寸和截帧分辨率quality控制 JPEG 压缩率uploadUrl让组件能指向不同后端onSuccess把服务端返回的文件名和本地预览图一起交给调用方。这样页面逻辑和采集逻辑解耦后续换存储方案只改后端。5.2 服务端校验别让「拍照」变成「传任意图」前端拍照上传有个天然漏洞用户完全可以不走摄像头直接构造一个 Base64 图片提交。如果业务要求必须是实时拍摄服务端能做的校验有限但可以加几道门槛检查图片尺寸是否符合约定范围、检查 EXIF 里是否有拍摄时间、结合会话里的时间戳判断提交间隔是否过短。更严格的做法是前端在拍照时把当前时间戳画进 canvas 角落服务端用 OCR 或简单像素比对验证但这会牺牲体验。我的习惯是普通场景只做格式和大小校验涉及身份核验的场景才上时间戳水印并且把水印位置和字体固定方便后续人工复核。5.3 验证清单上线前逐项过一遍检查项通过标准HTTPS 访问页面地址是 https 或 localhost权限拒绝分支用户点拒绝后页面有提示不白屏大图拦截超过 5MB 的请求被服务端拒绝文件名安全上传目录里不会出现../相关文件图片可访问通过 ImageServlet 能正常显示手机方向真机拍照后图片方向正确这套方案我从早期项目一直用到现在的工单系统最大的体会是浏览器端的问题永远比服务端多而服务端的坑基本都集中在路径和大小上。每次上线前把上面这张表过一遍能省掉大半的返工。希望帮到你。本文还有配套的精品资源点击获取
