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" />