通过二维码上传手机文件到服务器

# 移动开发 2024-05-05 14:20 0 19 来源：云博客

Hello，大家好。这是我的第一篇博客，给大家分享下手机扫码上传图片到服务器实现手机pc同步.

1、自动生成二维码--> 可以去二维码生成工具网站获取api也可以直接用这个：http://qr.topscan.com/api.php?text= ？

注意：问号代表二维码访问的路径如果后面跟www.baidu.com就会跳转百度

2、这里写了个h5页面用于手机扫一扫上传文件跳转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>load_photo</title> <link rel="stylesheet" href="${basePath}/resources/css/lyj/load_photo/load_photo.css"></head><body> <div class="phone_container"> <div class="photo_content"> <div class="header"> BIP产品文件上传模块 </div> <div class="business_name"> 业务名称：测试业务 </div> <div class="material_name"> 材料名称：身份证 </div> <img src="" class="showImg" width="90%"> <div class="low_bottom"> <div class="bottom"> <p>选择</p> <p>文件</p> </div> <div class="bottom_sure"> <p>确认</p> <p>上传</p> </div> </div> <div class="load_btn"> <form enctype="multipart/form-data"> <input type="file" class=‘inp_btn‘accept="image/png,image/jpeg,image/jpg"> <input type="button" value="提交" class="btn_empty"> </form> </div> </div> </div></body><script src="${basePath}/resources/js/plugins/jquery/jquery.js"></script><script type=‘text/javascript‘>//type 的值为1:选择文件,2选择文件&确认上传$(document).ready(function(){ $(‘.bottom_sure‘).css(‘display‘,‘none‘); $(‘.btn_empty‘).css(‘display‘,‘none‘); $(‘.inp_btn‘).change(function(){ $(‘.bottom_sure‘).css(‘display‘,‘inline-block‘); $(‘.btn_empty‘).css(‘display‘,‘inline-block‘); //展示图片 file=$(‘.inp_btn‘).get(0).files[0]; var img_photo=$(‘.showImg‘); var reader=new FileReader(); if(file){ reader.readAsDataURL(file); reader.onload=function(){ $(‘.showImg‘).get(0).src=reader.result; localStorage.setItem(‘img_data‘,reader.result); } }else{ console.log(‘文件为空‘) } })$(‘.btn_empty‘).click(function(){ if(localStorage.getItem(‘img_data‘)!==‘‘){ console.log(localStorage.getItem("img_data")); // 发起ajax请求 $.ajax({ url:‘/phone/pic‘, data:{file:localStorage.getItem("img_data")}, method:‘post‘, success:function(res_data){ console.log(res_data) } }) }})})</script></html>

h5 效果：

技术图片

3、给二维码生成唯一标识（这里通过路由跳转给当前h5页面二维码路径变量上赋值UUID->一打开页面二维码uuid刷新）

 @RequestMapping(value = "/lyjSanWang") public String lyjSanWang(Model model,Integer ordId,Integer compId) { String front = UUID.randomUUID().toString(); String back = UUID.randomUUID().toString(); model.addAttribute("front",front); model.addAttribute("back",back); model.addAttribute("ordId",ordId); model.addAttribute("compId",compId); return "lyj/check/check.ftl"; }

4、二维码check.ftl页面：

<!-- 手机上传 --><div id="open_window"> <div class="img-erweima"> <div> <p>扫一扫上传身份证正面</p> <img class="erweima_face" src="http://qr.topscan.com/api.php?text=http://localhost:8087/phone/page?flag=${front}" > //由二维码路径可以看出，二维码跳转的就是h5页面的路由 </div> <div> <#--flag=${back}--><p>扫一扫上传身份证背面</p> <img class="erweima_back" src="http://qr.topscan.com/api.php?text=http://localhost:8087/phone/page?flag=${back}" > </div> </div> <div><button onclick="closes_window()" class="close_window">返回信息填写</button></div></div>

5、服务器这块

1、这个处理器用于扫二维码的展示---h5页面

@RequestMapping(value = "/phone")@Controllerpublic class PhonePicController extends BaseController{ @AutowiredPhonePicService pic; protected static String PHONEURL = "http://localhost:8087/flag="; private static final Log logger = LogFactory.getLog(PhonePicController.class); //展示页面@RequestMapping(value = "/page", method = RequestMethod.GET) public String page(HttpServletRequest request) { logger.info(request.getParameter("flag")); return "upload/load_photo.ftl"; }

6、最后写个处理器就可以用于接收h5页面图片了

注意：因为前台传过来的图片是base64二进制，所以我这边后台进行了处理转化了图片路径存服务器

 //手机上传图片图片 @RequestMapping(value = "/pic", method = RequestMethod.POST) @ResponseBody public ResultInfo pic(HttpServletRequest request, String file,String flag,Integer side) { side=1; if (file == null && StringUtil.isEmptyTrim(file)) { logger.error("web图片单独上传异常"); } System.out.println("图片----------" + file); //写个路径,把base64转路径 String fileprex = "/resources/upload"; String filename = UUID.randomUUID().toString() + ".jpg"; String picpath = request.getSession().getServletContext().getRealPath(fileprex) + filename; System.out.println(picpath); System.out.println(flag); System.out.println(side); if (file != null) { Base64Utils.Base64ToImage(file, picpath); } Integer i = pic.save(fileprex + filename,flag); if (i < 0) { logger.error("失败"); } return ResultInfo.success("上传图片成功",i); } //获取数据库路径，回显数据 @RequestMapping(value = "/byurl", method = RequestMethod.POST) @ResponseBody public ResultInfo findbypic(HttpServletRequest request,String flag) { if (flag == null && StringUtil.isEmptyTrim(flag)) { logger.error("web图片单独上传异常"); } System.out.println(flag); String url = pic.findbypic(flag); System.out.println(url); String path="http://localhost:8087"; String data=path+url; return ResultInfo.success("ok",data); } // @RequestMapping(value = "/bycomid", method = RequestMethod.POST) @ResponseBody public ResultInfo bycomid(HttpServletRequest request,String tokenId, String file,String flag,Integer compId) { UserInfo userInfo; try { userInfo = getUserInfo(tokenId); } catch (Exception e) { return ResultInfo.reLogin(); } if (file == null && StringUtil.isEmptyTrim(file)) { logger.error("web图片单独上传异常"); } System.out.println("图片----------" + file); //写个路径,把base64转路径 String fileprex = "/resources/upload/"; String filename = UUID.randomUUID().toString() + ".jpg"; String picpath = request.getSession().getServletContext().getRealPath(fileprex) + filename; if (file != null) { Base64Utils.Base64ToImage(file, picpath); } Integer i = pic.saveComid(userInfo, fileprex + filename, flag, compId); if (i < 0) { logger.error("失败"); } return ResultInfo.success("ok", 200); }