前端部分（Vue + Vant）

import Vue from ’vue’ import { Uploader } from ’vant’ Vue.use(Uploader); 使用Uploader上傳組件

<van-uploader> <van-button icon='plus' type='primary' :after-read='afterRead'> 上傳文件(識(shí)別條碼) </van-button> </van-uploader> js部分、文件上傳完畢后會(huì)觸發(fā) after-read 回調(diào)函數(shù)，獲取到對(duì)應(yīng)的 file 對(duì)象。

afterRead(file) { var self = this; //調(diào)用上傳回調(diào)函數(shù) - upload this.upLoad(this.$baseUrl + 'upload/uploadParsing', file, function (response) { if( response.msg.length >0){ console.log(response.msg) }else{ Toast.fail(’識(shí)別失敗，請(qǐng)重新上傳條碼！’,3500) } }); }, upLoad(url, file, func) { var fileBase64 =’’ // 創(chuàng)建Canvas對(duì)象(畫(huà)布) debugger let canvas = document.createElement('canvas'); // 獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆) let context = canvas.getContext('2d'); // 創(chuàng)建新的圖片對(duì)象 let img = new Image(); // 指定圖片的DataURL(圖片的base64編碼數(shù)據(jù)) img.src = file.content; // 監(jiān)聽(tīng)瀏覽器加載圖片完成，然后進(jìn)行進(jìn)行繪制 img.onload = () => { // 指定canvas畫(huà)布大小，該大小為最后生成圖片的大小 canvas.width = 400; canvas.height = 300; /* drawImage畫(huà)布繪制的方法。(0,0)表示以Canvas畫(huà)布左上角為起點(diǎn)，400，300是將圖片按給定的像素進(jìn)行縮小。 如果不指定縮小的像素圖片將以圖片原始大小進(jìn)行繪制，圖片像素如果大于畫(huà)布將會(huì)從左上角開(kāi)始按畫(huà)布大小部分繪制圖片，最后的圖片就是張局部圖。*/ context.drawImage(img, 0, 0, 400, 300); // 將繪制完成的圖片重新轉(zhuǎn)化為base64編碼，file.file.type為圖片類型，0.92為默認(rèn)壓縮質(zhì)量 file.content = canvas.toDataURL(file.file.type, 0.92); fileBase64 = file.content // 最后將base64編碼的圖片保存到數(shù)組中，留待上傳。43 console.log(fileBase64) //查詢字典值 this.$axios.post(url,{’fileBase64Code’ :fileBase64}) .then(function (response) { func(response.data); }.bind(this)) .catch(function (error) {Toast.file('識(shí)別失敗，請(qǐng)重新上傳條碼！',3500); }) }; },

后端部分（Java ）

添加 zxing + base64 依賴

<!-- 解析二維碼 --><dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>3.3.3</version> </dependency> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>3.3.3</version> </dependency> <!-- Base64 --> <!-- https://mvnrepository.com/artifact/net.iharder/base64 --> <dependency> <groupId>net.iharder</groupId> <artifactId>base64</artifactId> <version>2.3.8</version> </dependency>

Controller

@ResponseBody@RequestMapping(value = '/uploadParsing', method = RequestMethod.POST)public ResponseMessage uploadParsing(@RequestBody imgUploadMessage uploadFile){ ResponseMessage rm=new ResponseMessage(); //解析Base64編碼之后 讀取條 try { String imgStr = uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf(',')+1); Decoder decoder = Base64.getDecoder(); byte[] base = decoder.decode(imgStr); for (int i = 0; i < base.length; ++i) {if (base[i] < 0) { base[i] += 256;} } ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(base); BufferedImage read = ImageIO.read( byteArrayInputStream);if (null==read) { rm.setMsg('解析失敗'); rm.setSuccess(false); return rm;}BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(read);BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));Map<DecodeHintType,Object> hints=new HashMap<>();hints.put(DecodeHintType.CHARACTER_SET,'GBK');hints.put(DecodeHintType.PURE_BARCODE,Boolean.TRUE);hints.put(DecodeHintType.TRY_HARDER,Boolean.TRUE); Result decode = new MultiFormatReader().decode(bitmap, hints);log.debug('條形碼的內(nèi)容是：' + decode.getText());rm.setMsg(decode.getText()); } catch (Exception e) {e.printStackTrace();log.debug('解析失?。?,e);rm.setSuccess(false);rm.setMsg('解析失敗'); } return rm; }

以上就是Vue+Java+Base64實(shí)現(xiàn)條碼解析的示例的詳細(xì)內(nèi)容，更多關(guān)于Vue+Java+Base64實(shí)現(xiàn)條碼解析的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！