zoukankan      html  css  js  c++  java
  • input file 上传图片并显示

    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <input type="file" value="上传图片" class="upload" @change="handleFileChange" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
        <img v-for="item of filelists" :src="item" :key="item" alt="">
      </div>
    </template>
    
    <script lang="ts">
        import { Component, Vue } from "vue-property-decorator";
        @Component({
            
        })
        export default class About extends Vue {
            filelists = [];
            handleFileChange(e:any){
                let file = e.target.files;
                let _this = this;
                for(let i in [...Array(file.length).keys()]){
                    let reader = new FileReader();
                    reader.readAsDataURL(file[i]); // 读出 base64
                    reader.onloadend = function () {
                        _this.filelists.push(reader.result);
                    };
                }
            }
            
            
        }
    </script>    

      File对象继承自Blob对象,也就是说Blob对象的属性和方法,File对象也可以使用,而File对象本身也有自己的属性和方法。

      lastModified属性,返回File对象引用文件最后的修改时间。

      lastModifiedDate属性,引用文件最后修改时间的Date对象。

      name属性,所引用文件的名字。

      size属性,返回文件大小。

      webkitRelativePath属性,相关的Path或URL。

      type属性,返回文件的多用途互联网邮件扩展类型。

      File的方法。

      geAsBinary()把文件内容按照二进制形式解析成字符串并返回

    Valid Accept Types:
    
    For CSV files (.csv), use: 
    
    <input type="file" accept=".csv" />
    For Excel Files 2003-2007 (.xls), use: 
    
    <input type="file" accept="application/vnd.ms-excel" />
    For Excel Files 2010 (.xlsx), use: 
    
    <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
    For Text Files (.txt) use: 
    
    <input type="file" accept="text/plain" />
    For Image Files (.png/.jpg/etc), use: 
    
    <input type="file" accept="image/*" />
    For HTML Files (.htm,.html), use:
    
    <input type="file" accept="text/html" />
    For Video Files (.avi, .mpg, .mpeg, .mp4), use:
    
    <input type="file" accept="video/*" />
    For Audio Files (.mp3, .wav, etc), use:
    
    <input type="file" accept="audio/*" />
    For PDF Files, use:
    
    <input type="file" accept=".pdf" /> 
  • 相关阅读:
    eth0&nbsp;no&nbsp;such&nbsp;device(reload)
    wince驱动开发入门
    如何在Linux中添加新的系统调用
    嵌入式Linux启动优化手记2&nbsp;U…
    关于uboot的一些优化
    Yaffs2根文件系统制作
    kernel下制作动态logo
    linux&nbsp;dev/dsp&nbsp;声卡学习笔记
    【JDK8】Java8 优雅的异步调用API CompletableFuture
    每周总结:2019年12月第5周
  • 原文地址:https://www.cnblogs.com/mary-123/p/12383301.html
Copyright © 2011-2022 走看看