v3-lab-xcx/pages_basics/faceImage.vue

<!-- 身份验证 -->
<template>
    <view id="faceImage">
        <view class="max-box">
            <view>添加照片</view>
            <img v-if="!imgUrl" class="img-add" src="@/images/basicsModules/icon_07.png" @click="selectImage">
            <img v-if="imgUrl" mode="widthFix" class="img-box" :src="imgUrl">
        </view>
		<view v-if="imgUrl" class="button-box" @click="selectImage">重新上传</view>
    </view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { mystudent } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                imgUrl:"",

            }
        },
        onLoad() {

        },
		onShow(){
			this.mystudent();
		},
        methods: {
			// 获取上传头像
			async mystudent(){
				const {data} = await mystudent();
				if(data.code == 200){
					if(data.data){
						this.imgUrl = config.base_url+data.data.faceImg;
					}
				}
			},
            // 图片上传
            selectImage() {
                let self = this;
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(res) {
                        let tempFilePaths = res.tempFilePaths[0];
                        self.uploadImg(tempFilePaths);
                    }
                });
            },
            async uploadImg(tempFilePaths){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/base/app/lab/api/commit/face', //仅为示例，非真实的接口地址
                    header:{'Authorization':uni.getStorageSync('token')},
                    filePath: tempFilePaths,
                    name: 'file',
                    formData: {
                        'file': 'test'
                    },
                    success: (uploadFileRes) => {
                        let res = JSON.parse(uploadFileRes.data);
                        if(res.code == 200){
							this.imgUrl = res.data.cardUrl
                            uni.showToast({
                                title: "识别成功",
                                icon:"none",
                                mask:true,
                                duration: 2000
                            });
                            setTimeout(function(){
                                uni.navigateBack();
                            },2000);
                        }else{
                            uni.showToast({
                                title: '您上传的身份验证无法识别，请重新上传其他照片',
                                icon:"none",
                                mask:true,
                                duration: 2000
                            });
                        }
                        // let res = JSON.parse(uploadFileRes.data);
                        // self.imgUrl = res.data.url;
                        // self.commitFace();
                    },
                    fail: err => {},
                    complete: () => {
						setTimeout(function(){
							uni.hideLoading()
						},2000);
                    }
                });
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #faceImage{
        height:100%;
        width:100%;
        .max-box{
            // height:550rpx;
			padding-bottom:40rpx;
            background #fff
            view{
                line-height :95rpx;
                font-size:28rpx;
                color:#333333;
                margin-left:20rpx;
            }
            .img-add{
                margin:5rpx auto;
                height:360rpx;
                width:360rpx;
                /*margin:5rpx 0 0 30rpx;*/
            }
			.img-box{
				display block;
                margin:5rpx auto;
			}
        }
		.button-box{
			width:650rpx;
			line-height:80rpx;
			text-align center;
			border-radius:10rpx;
			background #007AFF;
			color:#fff;
			margin:50rpx auto;
		}
        .up-data-button{
            position absolute
            bottom:0;
            left:0;
            width: 750rpx;
            height: 120rpx;
            background: #0183FA;
            line-height:120rpx;
            text-align center
            color:#fff;
            font-size: 30rpx;
        }
    }
</style>