【vue】 上传快递单条形码 识别单号

第三方插件：quagga.js
二维码插件：qrcodejs2.js(本篇未用到)
安装条形码插件库 npm i quagga -s -d

在需要的页面引入：

import Quagga from 'quagga' // 条形码 import QRCode from 'qrcodejs2'

            点击上传快递单条形码（识别单号）
 

            
 

 // 识别物流信息
    thumbupdateUpload(params) {
      const file = params.file
      const imgType = ['image/png', 'image/jpg', 'image/jpeg']
      if (imgType.indexOf(file.type) === -1) {
        this.$message.warning('上传图片格式必须为: png或jpg格式')
        return false
      }
      // this.express_img = URL.createObjectURL(file) //赋值图片的url，用于图片回显功能
      let _this = this
      if(file){
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onloadend = function() {
          let img = new Image()
          img.src = reader.result
          _this.init(img.src) // init函数，路径为参数
        }
      }
    },

    init(src){
      let _this = this
      const config = {
        locator: {
          patchSize: "medium",
          halfSample: true
        },
        numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),
        decoder : {
          readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"], // List of active readers
        },
        locate: true,
        src:src
      }
      Quagga.decodeSingle(config,function(result) {
        if(!result){
          _this.$message.error('图片中没有条形码!')
          return false;
        }
        //识别结果
        if(result.codeResult){
          _this.addForm.express_number = result.codeResult.code
          _this.express_img = src // 图片回显
        }else{
          _this.$message.error('未识别图片中条形码!')
        }
      })
    },