import Vue from 'vue' 
import { Uploader } from 'vant' 
Vue.use(Uploader);

 <van-uploader>
   <van-button icon="plus" type="primary" :after-read="afterRead">        
     上传文件(识别条码)
  </van-button>
 </van-uploader>

afterRead(file) {
    var self = 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) {
       var fileBase64 =''
       // 创建Canvas对象(画布)
       debugger
       let canvas = document.createElement("canvas");
       // 获取对应的CanvasRenderingContext2D对象(画笔)
       let context = canvas.getContext("2d");
       // 创建新的图片对象
       let img = new Image();
       // 指定图片的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编码的图片保存到数组中，留待上传。43           console.log(fileBase64)
           //查询字典值
           this.$axios.post(url,{'fileBase64Code' :fileBase64})
           .then(function (response) {
              func(response.data);
           }.bind(this))
           .catch(function (error) {
               Toast.file("识别失败，请重新上传条码！",3500);
           })
     };
  },

<!-- 解析条码码 -->
　　<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>

　　@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("条形码的内容是：" + decode.getText());
               rm.setMsg(decode.getText());
              
            } catch (Exception e) {
                e.printStackTrace();
                log.debug("解析失败：",e);
                rm.setSuccess(false);
                rm.setMsg("解析失败");
            }
         return rm;
    }