zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    UVa11218 KTV
    counting sort 计数排序
    Uva10474
    Uva110 Meta-Loopless Sorts
    Uva592 Island of Logic
    Qtwebkit flashplayer插件问题
    C++程序员的javascript教程
    Binary Search
    排列组合生成算法
    【Linux】mkdir命令
  • 原文地址:https://www.cnblogs.com/chenyudi/p/12587106.html
Copyright © 2011-2022 走看看