一、图片上传
注意:
通过 图片转换接口 ,将传入的图片地址以文件参数形式提交给接口,返回 图片链接,图片链接可直接在网页上打开
根据 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)
})
},
}