vue 调用摄像头拍照以及获取相片本地路径

最新推荐文章于 2024-09-19 16:38:09 发布

杨园园的微博

最新推荐文章于 2024-09-19 16:38:09 发布

阅读量5k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/rosy_yang/article/details/82114741

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

包含图片的增加和删除功能

<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>