vue图片上传的简单组件

<template>
    <div class="rili" id="rili">
        <div class="updel">
            <label class="sizi" for="ip"></label>
            <label class="sizia" for="ip"></label>
            <input type="file"  @change="hus()"  id="ip" />
        </div>
    </div>
</template>
<script>
export default {
    name:"rili",
    data(){
        return{

        }
    },
    mounted(){

          if(typeof FileReader=='undifined')        {
              console.log('抱歉，你的浏览器不支持 FileReader');
          }else{
              console.log('FileReader');
          }
    },
    methods:{
        hus(){
            var than = this;
            var file = document.getElementById('ip');     //获取图片上传标签
            var dile = file.files[0];                      //在input 的files获取dom对象中内置的files属性的值是会返回一个自然下标的对象,
            var reader = new FileReader();                  //创建读取文件的对象
            reader.onload = function(e){
                var url = e.target.result;                  //获得url
                 var img = new Image();                     //创建 img标签
                img.src = url;                              //设置地址
                document.getElementById('rili').appendChild(img);   //添加到你需要的位置
                  than.$emit('adurl',url);        //需要把获的值传给父组件
            }

            reader.readAsDataURL(dile);     //调用方法

        }

    }
}
</script>