VUE封装一个拍照组件

最新推荐文章于 2024-08-12 21:08:43 发布

Romatic_1

最新推荐文章于 2024-08-12 21:08:43 发布

阅读量1k

点赞数

分类专栏： APP js 文章标签： vue 拍照组件

本文链接：https://blog.csdn.net/Romatic_1/article/details/94613674

版权

本文介绍如何在Vue项目中封装一个拍照组件，该组件适用于浏览器环境，但不支持App打包后的安卓手机。组件提供了拍照功能，允许自定义样式。在使用时，只需简单引入并调用。

摘要由CSDN通过智能技术生成

在一个vue项目中，封装一个拍照的组件
仅适用于浏览器，App打包后安卓手机不满足
组件实现拍照功能，样式可以自己设置

getPhoto.vue

<template>
    <div class="getPhone">
        <input accept="image/*" type="file" @change="acceptImage"/>
        <van-popup v-model="showload" :close-on-click-overlay="false">
            <van-loading class="loadimg" type="spinner" ></van-loading>
        </van-popup>
    </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
    name:"getPhoto",
    props:["index2"],
    data(){
        return{
            showload:false
        };
    },
    methods:{
        acceptImage(){
            let file = event.target.files[0];
            if(file.size >= 6291456) {
            // console.log("超过6MB数据大小，请重新选择上传");
                Dial