vue使用相机拍照并获取图片

<!-- 调用相机，拍照并获取图片功能 -->
<template>
    <div class="content">
        <div class="face">
            <input type="file" name="file" class="upload" @change="uploadImg" accept="image/*" capture="camera">
            <span class="span-txt">人脸识别</span>
        </div>
        <img class="myimg" v-if="imgUrl" :src="imgUrl" />
    </div>
</template>

<script>
import Util from '@/common/js/util.js'
export default {
    data() {
        return {
            imgUrl: ''
        }
    },
    created() {
    },
    methods: {
        uploadImg(e) {
            let file = e.target.files[0];
            let url = "";
            let that = this;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                url = this.result.substring(this.result.indexOf(",") + 1);
                that.imgUrl = "data:image/png;base64," + url;
            };
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    overflow: hidden;
}
.face {
    height: .86rem;
    margin-top: 20px;
    position: relative;
    .upload {
        width: calc(100% - 40px);
        height: 43px;
        line-height: 43px;
        opacity: 0;
        position: absolute;
        z-index: 22;
        left: 0;
        margin: auto;
        right: 0;
    }
    .span-txt {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #ffffff;
        position: absolute;
        left: 0;
        margin: auto;
        right: 0;
        background: #cdab6a;
        width: calc(100% - 40px);
        height: 43px;
        line-height: 43px;
        border-radius: 4px;
        text-align: center;
    }
}
.myimg {
    margin: 0.5rem;
    width: 6rem;
    height: auto;
}
</style>