5g-track/src/views/home/components/addPhoto.vue

<template>
    <div class="addPhoto-wrap">
        <div class="main-wrap">
            <!-- <div class="img-title">
                <span>请上传人脸照片</span>
            </div> -->
            <div class="main">
                <div class="img-item" >
                    <div class="template-wrap">
                        <!-- 使用背景图展示 -->
                        <!-- <div class="imgs" :style="{backgroundImage:`url(${photo.url})`}"></div> -->
                        <!-- 用image组件展示 -->
                        <div class="img-wrap">
                            <van-image
                            v-show="photo" 
                            class="imgs"
                            fit="contain"
                            :src="photo"
                            />

                            <div class="temp" v-show="!photo" >
                                <!-- <img class="cameraIcon" src="@/assets/image/camera-icon.png" alt=""> -->
                                <svg class="cameraIcon" viewBox="0 0 24 24"><path fill="currentColor" d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>
                                <span>头像上传</span>
                            </div>
                        </div>
                        <input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*">
                        <!-- <input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*"> -->
                    </div>
                </div>

                <!-- 用来放添加按钮 -->
                <!-- <div class="img-item" v-show="!photo.url">
                    <div class="template-wrap">
                        <input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*" capture="camera">
                        <div class="img-wrap">
                            <div class="temp">
                                <img class="cameraIcon" src="@/assets/image/camera-icon.png" alt="">
                                <span>头像上传</span>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { JudgeCompress, RotateImage, CheckFile, FiletoDataURL } from '@/utils/handleImage'
import { Image } from 'vant'


export default {
    name:'AddPhoto',
    // props:{
    //     photo:Object,
    // },
    components:{
        [Image.name]:Image,
    },
    data(){
        return {
            isKey:0,
            compressSize:100,
            photo:'',
        }
    },
    methods:{
        onChange(e) {
            if(!e.target.files[0]){      //用户可能取消选择，此时啥都不用做
                return 
            }
            this.$emit('readyHandle')    //告诉父级已经开始处理.
            this.photo = ''
            let file = e.target.files[0];
            let _this = this
            if(file){
                var imageFile = CheckFile(file);
                if(!imageFile){
                    this.$Toast.error('文件格式错误！')
                    return
                }else{
                    RotateImage(imageFile).then(res =>{         //传入文件，旋转后返回文件进行压缩
                        JudgeCompress(res,this.compressSize,0.95).then(res => {    //传入文件，压缩返回压缩后的文件
                            FiletoDataURL(res).then(res => {    //传入文件，返回base64 DataURL
                                _this.photo = res
                                _this.$emit('changePhoto', res)    
                                _this.isKey = (new Date()).getTime()    //修改key以防止重新选择同一张图不触发change
                            })
                        })
                    })
                }
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
.addPhoto-wrap
    width 100%
    position relative
    z-index 999
    .main-wrap
        width 100%
        padding 0
        box-sizing border-box
        .img-title
            // background rgb(64,158,255)
            padding 10px
            text-align center
            font-size 14px
            align-items center
            color black
            padding-left 5px
        .main
            width 100%
            box-sizing border-box
            padding 40px 5px
            display flex
            justify-content center
            .img-item
                width 50%
                height 0
                padding-bottom 50%
                position relative
                overflow hidden
                box-sizing border-box
                display inline-block
                .template-wrap
                    box-sizing border-box
                    position absolute
                    overflow hidden
                    bottom 5px
                    top 5px
                    left 5px
                    overflow hidden
                    right 5px
                    // background rgba(0,133,208,0.7)
                    padding 5px
                    .img-wrap
                        box-sizing border-box
                        width 100%
                        height 100%
                        border-radius 5px
                        overflow hidden
                    .imgs
                        width 100%
                        height 100%
                    .temp
                        position absolute 
                        top 5px
                        bottom 5px
                        left 5px
                        right 5px
                        border-radius 5px
                        overflow hidden
                        position absolute 
                        left 50%
                        top 50%
                        transform translate(-50%, -50%)
                        display flex
                        flex-direction column
                        justify-content center
                        align-items center
                        span 
                            color black
                            margin-top 10px
                            font-size 14px
                        .cameraIcon
                            width 60px
                            height 60px
                            color black
                    #myInput
                        position absolute 
                        left 0
                        top 0 
                        z-index 500
                        display inline-block
                        opacity 0
                        width 100%
                        height 100%

</style>