vue 封装组件上传img

var _uploadTemplate = '<div>'+
    '<input type="file" name="file" v-on:change="change" id="file" accept="img.png" style="display: none;">' +
    '</div>';

Vue.component('vue-upload', {
    template: _uploadTemplate,
    props: ["accept","backfun", "height", "width"],
    data: function () {
        return {
            model: {
                code: 0,
                message: "",
                fileUrl: ""
            }
        }
    },
    methods: {
        change: function () {
            var that= this;
            var file = document.getElementById("file"); // 文件流
            var fileData=file.files[0];
            var fileType=file.value.toLowerCase().split('.');//以“.”分隔上传文件字符串
            //展示数据用
            //限制图片格式
            if(fileType[fileType.length-1]!='jpg'&&fileType[fileType.length-1]!='png'&&fileType[fileType.length-1]!='jpeg'){
                document.getElementById("file").value = "";
                that.model.code =1;
                that.model.message="图片格式不正确！";
                that.backfun(that.model);
                return;
            }
            if (fileData.size > 5242880) {
                document.getElementById("file").value = "";
                that.model.code = 2;
                that.model.message="图片文件太大！";
                that.backfun(that.model);
                return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(fileData,"UTF-8");
            reader.onload = function (evt) {
                var fileString = evt.target.result;
                that.model.code = 0;
                that.model.fileUrl =fileString;
                that.backfun(that.model);
            }
        }
    },
});

var _loadingTemplate ='<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"><div style="display: block;" v-if="show"></transition>';

Vue.component('coinbig-loading', {
    template: _loadingTemplate,
    props: ["show"],
});

html    样式就不写了 没什么东西

调用组件

 <div class="middle-image">
     <div class="middle-imageson">
         <img class="middle-imgas" :src="imgSrcTx||'/url'"/> //上传后会传到这。有一个默认的img
     </div>
     <div class="middle-imagesona" v-on:click="upload()">修改</div>
     <vue-upload :ext="'png,jpeg,jpg'":backfun="uploadBack" :width="64" :height="64"></vue-upload>
 </div>

调用js

            //头像上传图片
            upload:function(){
                $("#file").trigger("click");
            },
            //图片SHANGCHUAN
            uploadBack:function(data){
                var that = this;
                if(data.code!=0){
                    return;
                }
                that.imgSrcTx = data.fileUrl;
                that.SubmitsendImg();
            },
            SubmitsendImg:function () {
                var that = this;
                Comm.runebws("url",{avatar:that.imgSrcTx},"post",function (result) {
                    if(result.code==0){

                    }else{
                        that.msgFun(result.msg);
                        return
                    }
                })
            }