經過二維碼上傳手機文件到服務器

時間  2019-12-10
標籤 經過 二維 上傳 手機 文件 服務器 简体版
原文   原文鏈接

Hello，你們好。這是個人第一篇博客，給你們分享下手機掃碼上傳圖片到服務器實現手機pc同步.

 

一、自動生成二維碼--> 能夠去二維碼生成工具網站獲取api也能夠直接用這個：http://qr.topscan.com/api.php?text= ？ 

 注意：問號表明二維碼訪問的路徑若是後面跟www.baidu.com就會跳轉百度javascript

二、這裏寫了個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 效果：

       

                                                               

三、給二維碼生成惟一標識（這裏經過路由跳轉給當前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";
    }

 四、二維碼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>

 

 五、服務器這塊

一、這個處理器用於掃二維碼的展現---h5頁面php

@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";
    }

 

 六、最後寫個處理器就能夠用於接收h5頁面圖片了

注意：由於前臺傳過來的圖片是base64二進制，因此我這邊後臺進行了處理轉化了圖片路徑存服務器css

    //手機上傳圖片圖片
    @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);
        }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程