H5/VUE-图片上传及二维码显示

一、图片上传

注意:
  通过 图片转换接口 ，将传入的图片地址以文件参数形式提交给接口，返回 图片链接，图片链接可直接在网页上打开
  根据 formData 形式，将传入的图片名称，转换为图片https网址(注意：传入的参数一般是文件且不加密）

这里用的是 van 组件 Vant 2 - Mobile UI Components built on Vue

<div class='picture'>
    <div class='characters'>证件照片</div>
    <div class='IDpicture'>
       <van-uploader v-model='photos' :preview-image='true' multiple :after-read='readPhoto' :max-count="1"/>
       <div class='prompt'>请上传个人小一寸蓝底证件照片</div>
    </div>
</div>

import Cookies from 'js-cookie'
import { Toast, Notify } from 'vant'
import { APP_BASE_API } from '@/utils/env'
import axios from 'axios'

data(){
    return{
    	photos: [],
    	photoURL: '',
    	allUpload: 0,
    	allUploadSuccess: 0,
    	allUploadFailed: 0,
    }
}

下面方法，是把上传的文件，通过后端的接口，将文件地址补全为https地址后，下一步再和其他信息一起上传给后端进行相关接口操作（如 “ 注册 ” 按钮，即先上传图片-获取地址-注册） 

methods: {
	readPhoto(e, detail) {
      this.$nextTick(() => {
        this.uploadImg('tripuser', this.photos[0].file)
      })
    },
	uploadImg(type, file) {
      this.allUpload++
      const formData = new FormData()
      formData.append('file', file)
      const token = Cookies.get('Token') || ''
      return (
        axios
          // .post(APP_BASE_API + 'upload/incomingTrainImage?', formData, {   // 'uploadImage/' --图片上传接口名称
          .post(APP_BASE_API + 'uploadImage/' + type, formData, {
            xsrfHeaderName: 'Authorization', // 请求头的名字自定义，看后端要求
            headers: {
              'Content-Type': 'multipart/form-data',
              'n-d-version': '{"xdy-app-gz-gx-rest":"3.0.0", "xdy-websocket":"1.0"}',
              Authorization: 'Bearer ' + token // 请求头的规则，看后端要求
            }
          }).then((res) => {
            // console.log('图片', res)
            if (res.data.error_code === 200 && res.data.results.code === 200) {
              this.allUploadSuccess++
              this.photoURL = res.data.results.relativePath
              if (this.allUpload - this.allUploadSuccess === 0) {
                Notify({
                  message: `此次上传结束,成功 ${this.allUploadSuccess} 张，失败 ${this.allUploadFailed} 张`,
                  type: 'success',
                  duration: 1500
                })
              } else {
                Notify({
                  message: `上传图片成功,此次上传一共 ${this.allUpload} 张,失败 ${
                    this.allUpload - this.allUploadSuccess
                  } 张`,
                  type: 'success',
                  duration: 1500
                })
              }
            } else {
              Toast({
                message: res.data.results.message,
                position: 'middle',
                duration: 1000
              })
              Notify({
                message: `上传图片失败,失败 ${this.allUpload - this.allUploadSuccess} 张`,
                type: 'warning',
                duration: 1500
              })
              this.photos = []
              this.photoURL = ''
              this.allUploadFailed++
            }
          }).catch((err) => {
            Toast({
              message: err.message,
              position: 'middle',
              duration: 1500
            })
            this.photos = []
            this.photoURL = ''
            this.allUploadFailed++
          })
      )
    },
}

二、二维码展示页面

1、下载

npm install qrcode --g

成功后可在 package.json 中查找到

2、引用

<template>
    ...
    <div class='code'>
        <div class='member'>
          <div  >
            <canvas class='qr-code' id='qr-code'></canvas>
          </div>
        </div>
      </div>
	...
</template>

import QRCode from 'qrcode';  //二维码
import { personNel } from '@/api';  //接口

data(){
    return{
        options: {
        scale: 5,
        height: 200,
        wight: 200,
        color: {
          dark: '#01b85d', // Blue dots
          light: '#0000' // Transparent background
        }
      },
    }
}

created() {
    this.qrCodeContent = JSON.stringify({ ownerId: this.stall.ownerId, gid: this.stall.gid })
    this.getUserInfo()
    this.createQrCode()
  },

methods: {
	createQrCode(id) {
      //   获取生成二維碼的dom
      try {
        const qrCodeDom = document.getElementById('qr-code')
        const { qrCodeContent, options } = this
        QRCode.toCanvas(qrCodeDom, qrCodeContent, options, (error) => {
          if (error) return Toast.fail(error)
        })
      } catch (e) {
        Toast.fail(e)
      }
    },
    getUserInfo() {
      this.customerType()
      const params = {
        userId: this.$route.params.userId
      }
      personNel.getUserInfo(params).then(res => {
        if (res.code === 200 || res.error_code === 200) {
          const Res = res.results
          this.list.name = Res.name
          this.list.phone = Res.phone
          this.list.identityCard = Res.identityCard
          this.list.photo = Res.photo
          this.list.userTypeId = Res.userTypeId
        }
      }).catch(err => {
        console.log('errQ', err)
      })
    },
}