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 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);   //添加到你需要的位置

            }

            

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

            this.$emit('adurl',url);        //需要把获的值传给父组件

        }

    }   

}

</script>