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="" alt="" 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}" alt=""> //由二維碼路徑可以看出，二維碼跳轉的就是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}" alt=""> </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); }