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);
}
原文地址：https://www.cnblogs.com/zrboke/p/11192458.html
时间： 2024-12-12 23:44:43