vue 4.0 移動端調用相機拍照功能實現

<template>
<div>
<!--照片區域-->
<div v-for="(urls, index) in imgs " :key="index" 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; 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() {},
}
</script>
 
<style scoped>
 
 
</style>