DAY16 - 档案处理 - 上传前预览

接下来的范例都会以vue.js语法撰写喔!

情境

在上传图档到server前，须在前端UI上显示预览图像。

上传预览的两种方式

方法1. ObjectURL

流程

1. 上传档案後从FileList中取得File物件
2. 建立 URL物件使用createObjectURL将File物件传入，取得ObjectURL
3. 将取得的ObjectURL放在需预览的区块，大功告成

流程

HTML

<input type="file" @change="previewObjectURL">

Javascript

previewObjectURL(e){
  let [file] = e.target.files;
  let _objectURI = window.URL.createObjectURL(file);
  
},//end: uploadFile

codepen sample : 连结

方法2. DataURI

流程

1. 上传档案 -> 从FileList中取得File物件
2. 透过FileReader，将档案内容透过readAsDataURL将档案转换成DataURI

HTML

<input type="file" @change="previewDataURI">

Javascript

previewDataURI(e){
  let [file] = e.target.files;
  const reader =  new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = async function(e){
    console.log('filereader',e.target.result);  
  } //end: onloadend
  
},//end: uploadFile

codepen sample : 连结

两种方式都可以做到预览的效果，差异在於第二种方式DataURI的做法，是真的读档案之後再做呈现，所以速度上会比第一种ObjectURL的慢（ObjectURL是参考在档案位置给予URL）。所以可以试试看用比较大的图，再用这两种方式看看，ObjectURL一定会比DataURI的方式快～

那今天就和大家分享到这边罗～～