使用Vue實做圖片預覽

發表於 | 分類於 | |

單圖檔預覽

HTML：

1
2
3
4
5
<div id='app'>
    <input type="file" @change="fileSelected"/>
    <img  v-if="image" :src="image" width="300"/>
    <br/>
</div>
  • 這裡我們要顯示一個上傳檔案的按鈕，並且在img tag顯示選擇的圖片

Javascript:

1
2
3
4
5
6
7
8
9
fileSelected(event){
      const file = event.target.files.item(0); //取得File物件
      const reader = new FileReader(); //建立FileReader 監聽 Load 事件
      reader.addEventListener('load',this.imageLoader);
      reader.readAsDataURL(file);
 }
 imageLoader(event){
      this.image=event.target.result;
 }
  • 在Vue實體中，於methods建立fileSelected方法，當檔案按鈕觸發change事件時，會取得file物件
  • 此時利用FileReader監聽 Load事件，取得圖檔被轉成Base64格式的URL
  • 再把URL 綁到 img 的src 即可

單檔預覽Demo

多圖檔預覽

HTML：

1
2
3
4
5
<div id='app'>
    <input type="file" @change="fileSelected" multiple/>
    <br>
    <img :src="image.src" :height="image.height" v-for="image in images" />
</div>
  • 這裡我們要顯示一個上傳檔案的按鈕，並加上multiple
  • img Tag 則使用 v-for 的方式呈現

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fileSelected(event) {
    this.images=[];
    const files = event.target.files; //取得File物件
    [].forEach.call(files,this.fileReader);
},
fileReader(file) {
    const reader = new FileReader(); //建立FileReader 監聽 Load 事件
    reader.addEventListener("load", this.createImage);
    reader.readAsDataURL(file);
},
createImage(event) {
    const file = event.target;
    const image = {
        height : 100,
        title : file.name,
        src : file.result
    };
    this.images.push(image);
}
  • 多檔作法其實與單檔相似，利用forEach個別取得圖檔的 Base64 RUL
  • createImage 方法會把每一個URL存放到data 中的 images陣列

多檔預覽Demo

參考

FileReader.readAsDataURL()
理解Javascrpit[].forEach.call()