上传文件(识别条码)
- js部分、文件上传完毕后会触发after-read回调函数，获取到对应的file对象。
afterRead(file){
varself=this;
//调用上传回调函数-upload
this.upLoad(this.$baseUrl+"upload/uploadParsing",file,
function(response){
if(response.msg.length>0){
console.log(response.msg)
}else{
Toast.fail('识别失败，请重新上传条码！',3500)
}
});
},
upLoad(url,file,func){
varfileBase64=''
//创建Canvas对象(画布)
debugger
letcanvas=document.createElement("canvas");
//获取对应的CanvasRenderingContext2D对象(画笔)
letcontext=canvas.getContext("2d");
//创建新的图片对象
letimg=newImage();
//指定图片的DataURL(图片的base64编码数据)
img.src=file.content;
//监听浏览器加载图片完成，然后进行进行绘制
img.onload=()=>{
//指定canvas画布大小，该大小为最后生成图片的大小
canvas.width=400;
canvas.height=300;
/*drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
context.drawImage(img,0,0,400,300);
//将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
file.content=canvas.toDataURL(file.file.type,0.92);
fileBase64=file.content
//最后将base64编码的图片保存到数组中，留待上传。43console.log(fileBase64)
//查询字典值
this.$axios.post(url,{'fileBase64Code':fileBase64})
.then(function(response){
func(response.data);
}.bind(this))
.catch(function(error){
Toast.file("识别失败，请重新上传条码！",3500);
})
};
},
后端部分（Java）
添加zxing+base64依赖
com.google.zxing
core
3.3.3
com.google.zxing
javase
3.3.3
net.iharder
base64
2.3.8
Controller
@ResponseBody
@RequestMapping(value="/uploadParsing",method=RequestMethod.POST)
publicResponseMessageuploadParsing(@RequestBodyimgUploadMessageuploadFile){
ResponseMessagerm=newResponseMessage();
//解析Base64编码之后读取条
try{
StringimgStr=uploadFile.getFileBase64Code().substring(uploadFile.getFileBase64Code().indexOf(",")+1);
Decoderdecoder=Base64.getDecoder();
byte[]base=decoder.decode(imgStr);
for(inti=0;ihints=newHashMap<>();
hints.put(DecodeHintType.CHARACTER_SET,"GBK");
hints.put(DecodeHintType.PURE_BARCODE,Boolean.TRUE);
hints.put(DecodeHintType.TRY_HARDER,Boolean.TRUE);
Resultdecode=newMultiFormatReader().decode(bitmap,hints);
log.debug("条形码的内容是："+decode.getText());
rm.setMsg(decode.getText());
}catch(Exceptione){
e.printStackTrace();
log.debug("解析失败：",e);
rm.setSuccess(false);
rm.setMsg("解析失败");
}
returnrm;
}
以上就是Vue+Java+Base64实现条码解析的示例的详细内容，更多关于Vue+Java+Base64实现条码解析的资料请关注毛票票其它相关文章！