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>