js讀取 input file 檔案的兩種方式：

<div id="localImag">
    <img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
    <input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
</div>

1.使用FileReader讀取圖片（轉化為base64）

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(docObj.files[0]);//發起非同步請求
            reader.onload = function(){
                //讀取完成後，資料儲存在物件的result屬性中
                // console.log(this.result)
                imgObjPreview.src=this.result
            }
        }
}
 

主要使用readAsDataURL去完成轉換base64，如果是文件，也可以用readAsText(file,encoding)去讀取。

方法

FileReader提供瞭如下方法：

readAsDataURL和readAsText較為常用，這裡只對這兩者進行說明。

2.使用 window.URL.createObjectURL  讀取圖片（轉化為blod）(推薦)

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
}

總結

按照前輩們的說法，creatObjectURL可以有更好的效能，或許是瀏覽器自帶介面的原因, 可以處理的更快。 

而且最近做了一個需要上傳圖片預覽的專案，用的最簡單的input file上傳，最開始想到的就是用filereader實現前端預覽，很簡單，見前面的第一段程式碼，在自己手機上測試，沒問題。但在某些奇葩手機上，比如oppo 安卓4.3在我們app的webview內通過開啟相簿上傳發現無法預覽圖片！但在該手機的微信，瀏覽器內上傳均可以！所以推薦使用window.URL.createObjectURL

最後如果需上傳，可以使用form或者使用ajax上傳，form表單提交比較簡單，就不介紹。

ajax提交的時候原理還是獲取到obj.files[0]後。利用例項化的FormData 上傳檔案。如：

let fileObj = this.$refs.fileObj.files[0]; // js 獲取檔案物件
 var formData = new FormData();
        formData.append('file', fileObj);
        axios({
          url: process.env.URL_PATH + '/mallSealApply/uploadSealApply',
          method: 'post',
          headers: {'Authorization': this.$store.state.token},
          data: formData
        })