vant 上传图片识别是二维码图片

使用二维码识别插件

import QRCode from 'llqrcode'

使用上传组件

  <div class="code" v-if="item.type == 4">
            <div class="title">*{{item.input_item_name}}</div>
            <div class="upload">
              <van-uploader
                v-model="fileList"
               :after-read="(file) =>  afterUploadRead(file, i)"
                reupload
                accept='.jpg,.jpeg,.png'
                max-count="1"
              >
                <template #default>
                  <div class="qrcode-ico">
                    <div class="img">
                      <img src="../../assets/icon/add-upload.svg" alt="" />
                    </div>
                  </div>
                </template>
                <template #preview-delete>
                  <div class="qrcode-del" @click="valueArr[i].dataValue=''">
                    <img src="../../assets/icon/code-del.svg" alt="" />
                  </div>
                </template>
              </van-uploader>
            </div>
            <van-field
              v-show="false"
              v-model="valueArr[i].dataValue"
              :rules="[{ required: true }]"
              label="图片"
            />
          </div>

上传功能

const afterUploadRead = (file, i) => {
  const fn = useUpload(2, (access_url) => {
    valueArr[i].dataValue = access_url;
  })
  const URL = window.URL || window.webkitURL; // 兼容
  const url = URL.createObjectURL(file.file)
  QRCode.callback = function async (text) {
    if (text === 'error decoding QR Code') {
      showToast('上传失败，请上传二维码类型图片')
      console.log(fileList.value)
      fileList.value = []
      valueArr[i].dataValue=''
      return
    } 
    if (text) {
      fn(file)
    }
  }
  QRCode.decode(url)
};

上传接口

import api from '@/api';
import axios from 'axios';

export const useUpload = (access_permissions, callback) => {
  return async (fileObj) => {
    console.log(fileObj, 'fileObj')
    const file = fileObj.file;
    const ossData = {
      access_permissions: access_permissions,
      content_type: file.type,
      file_name: file.name
    };
    const ossRes = await api.identity.ossPutUrl(ossData);
    const { access_url, put_url } = ossRes.data;
    const fileRes = await axios({
      method: 'put',
      url: put_url,
      data: file,
      headers: {
        'Content-Type': file.type
      }
    });

    callback && callback(access_url, file);
  };
};