vue3+vant文件上传和扫描吊牌

最新推荐文章于 2024-05-15 13:48:47 发布

原创最新推荐文章于 2024-05-15 13:48:47 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

文章展示了在Vue.js应用中如何使用van-uploader组件进行图片上传，并利用Quagga库进行条形码扫描识别。用户上传图片后，文件被处理并发送到服务器，同时实现对拍摄图片的条形码信息提取。当条形码成功识别时，会显示代码结果；未识别到条形码则给出提示。

文件上传

html部分

<van-uploader v-model="productImage" >
	     <div class="productComplaint-form-upload-icon" >
	        <van-icon name="plus" />
	      </div>
	    </van-uploader>

JS部分

const productImage = ref([])//产品图片
watch(productImage, (now, old) => {
  console.log(now, old);
  let list=[]
  now.map(res=>{
    let params = new FormData()
    params.append("image", res.file)
    uploadImg(params).then(res => {
      let data = res.data
      if (data.code === 0) {
        list.push(data.data)
      } else {
        showToast(data.message);
      }
    })
  })
  obj.productImage=list
})

扫描吊牌号

引入Quagga

import Quagga from 'quagga'

在这里插入图片描述

html

<van-uploader capture="camera"   :after-read="afterRead">
                  <div class="productComplaint-form-upload-icon">
                    <van-icon name="scan" />
                  </div>
                </van-uploader>

const afterRead = (file) => {
  getUrl(file.file)
}
const getUrl = (file) => {
  let url = getObjectURL(file);
  let config = Object.assign( { src: url });
  Quagga.decodeSingle(config, function (result) {
    //识别结果
    if (result.codeResult) {
      console.log(result.codeResult.code);
    } else {
      alert("未识别到图片中的条形码！");
    }
  });
}