通过二维码上传手机文件到服务器
Posted zrboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过二维码上传手机文件到服务器相关的知识，希望对你有一定的参考价值。
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") @Controller public class PhonePicController extends BaseController @Autowired PhonePicService 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);
以上是关于通过二维码上传手机文件到服务器的主要内容，如果未能解决你的问题，请参考以下文章
Java生成二维码并用FastDFS上传到文件服务器返回图片地址