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