vue 調用攝像頭拍照以及獲取相片本地路徑(實測有效)

在學習這個的時候有一點前提：這是針對手機功能的，所以最重要的是要用手機進行實時調試

包含圖片的增加和刪除功能

 

<template>
    <div>
        <!--照片區域-->
        <div  v-for="(urls, index) in imgs " style="float: left; margin: 10px ; border: 1px solid #ccc;">
            <div style="text-align: right; position: relative;" v-on:click="deleteImg(index)">X</div>
            <img :src="urls" width="100px" height="100px"  />
        </div>
        <div style=" width: 100px; height: 100px; background-color: #ccc; border:1px solid #ccc; float: left;  margin: 10px ;" v-on:click="imgClick()"></div>
        <input style="float: left;  display: none;" type="file" id='uploadFile'  accept="image/*"  v-on:change="readLocalFile()">
    </div>
</template>

<script>

    export default{
        data() {
            return {
                imgs:[]
           }
        },
            methods:{
            //刪除圖片
                deleteImg:function(index){
                    this.imgs.splice(index,1);
                },
            //圖片click
                imgClick:function(){
                    document.getElementById("uploadFile").click();
                },
                //點擊選中圖片
                readLocalFile: function () {
                    var localFile = document.getElementById("uploadFile").files[0];
                    var reader = new FileReader();
                    var content;
                    var current=this;
                    reader.onload = function(event) {
                        content = event.target.result;
                        current.imgs.push(content);  //獲取圖片base64代碼
                      }
                    reader.onerror = function(event) {
                        alert('error')
                    }
                    content = reader.readAsDataURL(localFile,"UTF-8");
                   var sss=document.getElementById("uploadFile").value;
                   console.log(sss);
                }
            },
        mounted() {
        },
        created() {


                 },
        components: {

        }
    }
</script>

<style scoped>


</style>