用vue实现一个移动端图片上传的功能

<template>
  <div class="box">
    <div class="upDiv">
        {{labTex}}  //标题
        //上传按钮
        <input ref="uploadInput"
                type="file"
                class='upinp'
                name="file"
                value=""
                accept="image/gif,image/jpeg,image/jpg,image/png"
                @change="selectImg($event)"/>
    </div>
    //显示上传图片的区域
    <div :class="operationShow?'operation-div':'operation-div hide'">
           <img class="shoImg" :src="imgDefault">
    </div>
  </div>
</template>
<script>
export default {
    props: {
        value:{
            type:String ,
            default:''
        },
        labTex:{
            type:String ,
            default:''
        },
        imgDefault:{
            type:String ,
            default:''
        }
    },
    data() {
        return {
            dataUrl: '',
            defaultImg:''
        }
    },
    mounted() {
        console.log(this.value)
        console.log(this.labTex)
    },
    // input的change回调第一个参数是event对象
    methods: {
        selectImg(e){
          const imgFile = e.target.files[0];
           if (imgFile)
            {   
                this.operationShow=true
               if(this.checkFile(imgFile)){
                    this.upload(imgFile);
               }
           }
        
       },
       checkFile(file){
            //文件为空判断
            if (file === null || file === undefined) {
                alert("请选择您要上传的文件！");
                return false;
            }else{
                return true;
            }
            let size = Math.floor(file.size / 1024);
            // 这个条件还得改
            if (size!=0) {
                return true;
            }else{
                return false
            }
       },
       upload(file){
             try {
                let self = this;
                var result='';
                //执行上传操作
                var xhr = new XMLHttpRequest();
                xhr.open("post", ApiUrl+"/member/image/upload", true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            let returnData = $.parseJSON(xhr.responseText);
                            if (!returnData) throw  new Error("上传失败SERVER");
                            if (!returnData.code) throw new Error("上传失败SERVER")
                            if (returnData.code == 200) {
                                alert("上传成功")
                                //显示图片地址
                                self.$emit('change-img',returnData.name);
                                self.defaultImg = returnData.url;
                            } else {
                                alert("上传失败SERVER")
                            }
                            console.log(""+returnDate)
                        } else {
                            alert("上传失败")
                        }
                    };
                };
                var token = getMemberToken();
                //表单数据
                var fd = new FormData();
                fd.append("token", token);
                fd.append("file", file);
                //执行发送
                result = xhr.send(fd);
            } catch (e) {
                console.log(e);
                alert(e);
            }
       }
    }
}
</script>
<style>
.box {
    height: 11rem;
    margin-top: 0.5rem;
}
.upDiv{
    position:relative;
    height:1.2rem;
    width:100%;
    margin-bottom:0.08rem;
    width:5.5rem;
    text-align: center;
    z-index:10;
    font-size: 0.6rem;
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    border-radius: 0.4rem;
    color: #fff;
    border: none;
    height: 1.2rem;
    line-height: 1.2rem;
    display: inline-block;
    background: #0097ffd9;
}
.operation-div{
    width: 15rem;
    height: 9.2rem;
}
.operation-div img{
    width:100%;
    height:100%;
}
.upDiv .upinp{
    position:absolute;
    left:0px;
    right:0px;
    right:0px;
    bottom:0px;
    z-index:1;
    opacity:0;
}
.shoImg{
    width:15rem;
    border-radius:0.05rem
}
</style>

在页面当中的使用：

<upload-img 
     :lab-tex="`上传银行卡正面`"
       :img-default="imgFourDefault"
       v-on:change-img="chooseFourImg"
></upload-img>