input实现手机拍照

<div id="demo">
    <img :src="imgurl" width="200px" height="200px" alt="">
    <input style="display: none;" type="file" accept="image/*" id="cameraInput" capture="camera" @change="selectPhoto(event)">
    <div @click="clickBrn">点击上传</div>
</div>

<script>
    let app=new Vue({
        el: "#demo",
        data() {
            return {
                imgurl:""
            }
        },

        methods: {
            clickBrn(){
                document.getElementById("cameraInput").click();
            },
            selectPhoto(e){
                var that=this
                var file = e.target.files[0];
                // 创建FileReader对象
                var reader = new FileReader();
                // 读取文件内容
                reader.onload = function (e) {
                    var imageDataURL = e.target.result;
                    // console.log(imageDataURL,"img")
                    that.imgurl=imageDataURL
                    that.uploadImage(imageDataURL);
                };
                reader.readAsDataURL(file);
            },
            // 上传图像
            uploadImage(imageDataURL) {
                fetch('./your url', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: imageDataURL
                }).then(function (response) {
                    return response.text();
                }).then(data=>{
                    console.log(data)
                }).catch(function (error) {
                    console.log(error);
                });
            },
        },
})