MultipartFile上传图片

秒速五厘米 2022-05-31 14:40 158阅读 0赞

1.  1.      作者：LoveEmperor-王子様
    2.    
        
    3.  HTML：
    4.  <!DOCTYPE HTML>
    5.  <html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
    6.    xmlns:v-bind="http://www.w3.org/1999/xhtml">
    7.  <head>
    8.  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
    9.  <title>实名认证</title>
    10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    11. <link rel="stylesheet" th:href="@\{/css/common/ionic.css\}" />
    12. <link th:href="@\{/css/common/mainstyle.css\}" rel="stylesheet"/>
    13. <link th:href="@\{/css/common/common.css\}" rel="stylesheet"/>
    14.   
        
    15. <script th:src="@\{/js/jquery/jquery.min.js\}"></script>
    16. <script type="text/javascript" th:src="@\{/js/jq\_validate.js\}"></script>
    17. <script th:src="@\{/js/vue/vue.min.js\}"></script>
    18. <script th:src="@\{/js/vue/vue-resource.min.js\}"></script>
    19.   
        
    20.   
        
    21. </head>
    22. <body>
    23. 
    24. <div class="bar bar-header bar-dark" style="line-height: 30px">
    25. <h1 class="title">
    26. 实名认证
    27. </h1>
    28. 
    29. </div>
    30. <div class="bar bar-subheader bar-dark" style="height: 100px;width: 100%;text-align: center">
    31.   
        
    32.   
        
    33. <div class="step">
    34.   
        
    35.   
        
    36. <div class="row row-center font-12">
    37. <div class="col">
    38.   
        
    39.   
        
    40. <span class="green\_step">1</span>
    41.   
        
    42.   
        
    43. <i class="float-r green\_step"></i>
    44. </div>
    45. <div class="col">
    46. <i class="float-l green\_step"></i>
    47. <span class="green\_step">2</span>
    48. <i class="float-r green\_step"></i>
    49. </div>
    50. <div class="col">
    51. <i class="float-l green\_step"></i>
    52. <span class="green\_stepplus">
    53.                     <span class="green\_step">3</span>
    54.                     </span>
    55. <i class="float-r"></i>
    56. </div>
    57. <div class="col">
    58. <i class="float-l"></i>
    59. <span>4</span>
    60. </div>
    61. </div>
    62. <div class="row row-center font-12">
    63.   
        
    64.   
        
    65. <div class="col bule">
    66. 填写资料
    67. </div>
    68. <div class="col bule">
    69. 押金交纳
    70. </div>
    71. <div class="col bule">
    72. 实名认证
    73. </div>
    74. <div class="col">
    75. 扫码激活
    76. </div>
    77. </div>
    78. </div>
    79.   
        
    80.   
        
    81. </div>
    82.   
        
    83.   
        
    84. <div class="list">
    85.   
        
    86.   
        
    87.   
        
    88.   
        
    89. <div id="authendiv" v-show="authenshow" class="list" style="margin-top: 150px;width: 100%">
    90. <form id="uploadForm" enctype="multipart/form-data" method="POST" action="../identification/certification.fgl">
    91. <div class="picbox bg-white">
    92.   
        
    93.   
        
    94. <div class="row ">
    95. <div class="col img-row">
    96. <img alt="" v-bind:src="frontimg" width="100%" class="has\_img"
    97.  style="z-index: 100;top: 1rem"/>
    98. <input type="file" name="mIdCard" id="frontimgInput" v-on:change="onFileChangefront"
    99.    accept="image/\*"
    100.    style="top: 3.2rem;left: 3.4rem;width: 30%;z-index: 1;position: absolute;opacity: 0;border: none;cursor: pointer;"/>
    101. </div>
    102. <div class="col img-row">
    103. <img alt="" v-bind:src="frontimg2" width="100%" class="has\_img" style="z-index: 100;top: 1rem"/>
    104. </div>
    105. </div>
    106. <div class="row text-row" style="font-size: 15px">
    107. <div class="col">身份证正面照</div>
    108. <div class="col">实例图</div>
    109. </div>
    110. <div class="row " >
    111. <div class="col img-row">
    112. 
    113. 
    114. <img v-bind:src="backimg" alt="" width="100%" class="has\_img" style="z-index: 100"/>
    115. <input type="file" name="mVehicleLicence" id="backimgInput"  accept="image/\*"
    116.    v-on:change="onFileChangeback"
    117.    style="z-index: 1;cursor: pointer;top: 13.8rem;left: 3.4rem;position: absolute;width: 30%;border: none;opacity: 0;cursor: pointer;"/>
    118.   
        
    119.   
        
    120. </div>
    121. <div class="col img-row">
    122.   
        
    123.   
        
    124. <img alt="" v-bind:src="backimg2" width="100%" class="has\_img" style="z-index: 100"/>
    125. </div>
    126. </div>
    127. <input type="hidden" v-model="plateNumber" name="plateNumber"/>
    128.   
        
    129. <div class="row text-row" style="font-size: 15px">
    130. <div class="col" style="font-size: 15px">行驶证正面</div>
    131. <div class="col" style="font-size: 15px">实例图</div>
    132. </div>
    133. </div>
    134.   
        
    135.   
        
    136. <div style="margin-top: 5px;margin-right: 20px;margin-left: 20px">
    137. <input class="button button-block button-positive" type="button" value="提交审核" v-on:click="surebtn()"/>
    138. <p style="margin-top: 10px;color: \#A8A8A8;font-size: 13px">证件上文字清晰可识别，支持JPG,PNG格式</p>
    139. </div>
    140. </form>
    141. </div>
    142.   
        
    143.   
        
    144. </div>
    145.   
        
    146.   
        
    147. </body>
    148. <script th:inline="javascript">
    149.   
        
    150.   
        
    151. var valid = new ValidateFn();
    152.   
        
    153.   
        
    154. var authendiv = new Vue(\{
    155. el: "\#authendiv",
    156. data: \{
    157. authenshow: true,
    158. frontimg: '../img/common/idcard1.png',
    159. frontimg2: '../img/common/idcard2.jpg',
    160. backimg: '../img/common/driving1.png',
    161. backimg2: '../img/common/driving2.jpg',
    162. plateNumber: window.localStorage.getItem("plateNumber")
    163.   
        
    164.   
        
    165. \},
    166. methods: \{
    167.   
        
    168.   
        
    169. onFileChangefront(e) \{
    170.   
        
    171.   
        
    172. var files = e.target.files || e.dataTransfer.files;
    173. if (!files.length) return;
    174. this.createImagefront(files);
    175. \},
    176. createImagefront(file) \{
    177. if (typeof FileReader === 'undefined') \{
    178. return false;
    179. \}
    180. var image = new Image();
    181. var vm = this;
    182. var leng = file.length;
    183.   
        
    184.   
        
    185. var reader = new FileReader();
    186. reader.readAsDataURL(file\[0\]);
    187.   
        
    188.   
        
    189. reader.onload = function (e) \{
    190. vm.frontimg = ((e.target.result));
    191. \};
    192.   
        
    193.   
        
    194.   
        
    195.   
        
    196. \},
    197.   
        
    198.   
        
    199. onFileChangeback(e) \{
    200.   
        
    201.   
        
    202. var files = e.target.files || e.dataTransfer.files;
    203. if (!files.length) return;
    204. this.createImageback(files);
    205. \},
    206. createImageback(file) \{
    207. if (typeof FileReader === 'undefined') \{
    208. return false;
    209. \}
    210. var image = new Image();
    211. var vm = this;
    212. var leng = file.length;
    213.   
        
    214.   
        
    215. var reader = new FileReader();
    216. reader.readAsDataURL(file\[0\]);
    217.   
        
    218.   
        
    219. reader.onload = function (e) \{
    220. vm.backimg = ((e.target.result));
    221. \};
    222.   
        
    223.   
        
    224.   
        
    225.   
        
    226. \},
    227. surebtn: function () \{
    228.   
        
    229.   
        
    230. if ($("\#frontimgInput").val() == null || $("\#frontimgInput").val() == 0)\{
    231. valid.messageShowFn("请选择身份证正面照",30);
    232. return false;
    233. \}
    234. if ($("\#backimgInput").val() == null || $("\#backimgInput").val() == 0)\{
    235. valid.messageShowFn("请选择行驶证正面照",30);
    236. return false;
    237. \}
    238. $("\#uploadForm").submit();
    239.   
        
    240.   
        
    241.   
        
    242.   
        
    243. \}
    244. \}
    245.   
        
    246.   
        
    247.   
        
    248.   
        
    249. \})
    250. var inreview = new Vue(\{
    251. el: "\#inreview",
    252. data: \{
    253. inreviewshow: true
    254. \}
    255. \})
    256. if(\[\[$\{warning\}\]\] !=null)\{
    257. valid.messageShowFn(\[\[$\{warning\}\]\],15);
    258. \}
    259.   
        
    260.   
        
    261.   
        
    262.   
        
    263. </script>
    264. </html>
    265.   
        
    266.   
        
    267.   
        
    268. java：
    269. /\*\*
    270.  \* 实名认证
    271.  \* @param name
    272.  \* @param model
    273.  \* @return
    274.  \* @throws Exception 
    275.  \*/
    276. @RequestMapping(value = "/identification/certification.fgl", method = RequestMethod.POST)
    277. public String handleFileUpload(@RequestParam("mVehicleLicence") MultipartFile mVehicleLicence,
    278. @RequestParam("mIdCard") MultipartFile mIdCard, @RequestParam("plateNumber") String plateNumber,
    279. Model model) throws Exception \{
    280.   
        
    281. File idCard = File.createTempFile(String.format("id\_%s\_%s-1.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");// new File(String.format("id\_%s\_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")));
    282. File vehicleLicence = File.createTempFile(String.format("lic\_%s\_%s-1.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");//new File(String.format("lic\_%s\_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")));
    283.   
        
    284.   
        
    285. if (mVehicleLicence == null || mIdCard == null) \{
    286. model.addAttribute("warning", "上传文件不能为空");
    287. return "identification";
    288. \}
    289. if (mVehicleLicence.getSize() > GetConfig.get().getMaxUploadFile()\*1024\*1024
    290. || mIdCard.getSize() > GetConfig.get().getMaxUploadFile()\*1024\*1024) \{
    291. model.addAttribute("warning",
    292. String.format("上传文件不能超过%dM", GetConfig.get().getMaxUploadFile()));
    293. return "identification";
    294. \}
    295.   
        
    296.   
        
    297.   
        
    298. //FileUtils.copyInputStreamToFile(mIdCard.getInputStream(), idCard);
    299. //FileUtils.copyInputStreamToFile(mVehicleLicence.getInputStream(), vehicleLicence);
    300.   
        
    301.   
        
    302. //log.info("idCardFile=" + idCard.getName() + ":" + mIdCard.getSize());
    303. //log.info("vehicleLicense=" + vehicleLicence.getName() + ":" + mVehicleLicence.getSize());
    304.   
        
    305.   
        
    306.         img = ImageIO.read(mIdCard.getInputStream());      // 构造Image对象  
    307.         width = img.getWidth(null);    // 得到源图宽  
    308.         height = img.getHeight(null);  // 得到源图长  
    309.         BufferedImage image = new BufferedImage(375, 667,BufferedImage.TYPE\_INT\_RGB );   
    310.         image.getGraphics().drawImage(img, 0, 0, 375, 667, null); // 绘制缩小后的图  
    311. //        String fname = idCard.getName().substring(0, idCard.getName().lastIndexOf("."));//新名字
    312.         //ImageIO.write(image, "jpg", new File("e:/" + fname + ".jpg")); 
    313.         File file1 = File.createTempFile(String.format("id\_%s\_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");
    314.         ImageIO.write(image, "jpg", file1); 
    315.         File idCard2 = new File(file1.getAbsolutePath());
    316.         
    317.         
    318.         img2 = ImageIO.read(mVehicleLicence.getInputStream());      // 构造Image对象  
    319.         width2 = img2.getWidth(null);    // 得到源图宽  
    320.         height2 = img2.getHeight(null);  // 得到源图长  
    321.         BufferedImage image2 = new BufferedImage(375, 667,BufferedImage.TYPE\_INT\_RGB );   
    322.         image2.getGraphics().drawImage(img2, 0, 0, 375, 667, null); // 绘制缩小后的图  
    323. //        String fname2 = vehicleLicence.getName().substring(0, vehicleLicence.getName().lastIndexOf("."));//新名字
    324.         File file2 = File.createTempFile(String.format("id\_%s\_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");
    325.         ImageIO.write(image2, "jpg", file2); 
    326.         File vehicleLicence2 = new File(file2.getAbsolutePath());
    327.         
    328. CertificationCmdDTO cmd = new CertificationCmdDTO();
    329. cmd.setPlateNumber(plateNumber);
    330. cmd.getFiles().put("idCard", idCard2);
    331. cmd.getFiles().put("vehicleLicense", vehicleLicence2);
    332.   
        
    333.   
        
    334. AckDto<Object> ackDto = PakringServerCom.certification(cmd);
    335. if (idCard != null)
    336. idCard.deleteOnExit();
    337. if (vehicleLicence != null)
    338. vehicleLicence.deleteOnExit();
    339.   
        
    340.   
        
    341. if (ackDto != null) \{
    342. if (ackDto.getStatus() == 200) \{
    343. model.addAttribute("destatus", "up\_pic");
    344. return "infoReview";
    345. \} else \{
    346. if (ackDto.getError\_code() == ERROR\_FLAG.TOKEN) \{
    347. model.addAttribute("warning", "TOKEN超时");
    348. \} else if (ackDto.getError\_code() == ERROR\_FLAG.UNKNOW\_RECORD) \{
    349. model.addAttribute("warning", "未知记录");
    350. \} else if (ackDto.getError\_code() == ERROR\_FLAG.PAY) \{
    351. model.addAttribute("warning", "支付押金金额不足");
    352. \} else if (ackDto.getError\_code() == ERROR\_FLAG.WITHOUT\_PAY) \{
    353. model.addAttribute("warning", "请先付费");
    354. \} else \{
    355. model.addAttribute("warning", "未知错误1");
    356. \}
    357.   
        
    358. //return "redirect:/purchase/identification.fgl";
    359. return "identification";
    360.   
        
    361.   
        
    362. \}
    363. \} else \{
    364. model.addAttribute("warning", "未知错误");
    365. \}
    366. return "identification";
    367. \}
    368.