通過FileReader，和es6的方法解構賦值,promise物件簡單封裝上傳預覽

具體邏輯：選中圖片之後，觸發onchange方法，獲得上傳檔案物件，呼叫fileReader方法驗證圖片是否符合上傳需求，符合返回圖片文字，不符合返回錯誤資訊。

先介紹幾個技術點，沒接觸過的朋友，可以先看看：

Promise物件：是非同步程式設計的一種解決方案,裡面儲存著某個未來才會結束的事件的結果。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。技術連線：http://es6.ruanyifeng.com/#docs/promise

解構賦值：按照一定模式，從陣列和物件中提取值，對變數進行賦值。技術連結：http://es6.ruanyifeng.com/#docs/destructuring

FileReader物件:允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用file或blob物件指定要讀取的檔案或資料。技術連結：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

廣州vi設計公司http://www.maiqicn.com 辦公資源網站大全 https://www.wode007.com

圖片的預覽處理邏輯

    /**
     * @description         接收jpg,png,gif字尾的圖片，返回圖片文字
     * @param obj.file      檔案物件， File.files[0]
     * @param obj.size      預覽檔案大小（kb）,預設值200
     * @param obj.width     圖片寬度，預設為200px
     * @param obj.height    圖片高度，預設為200px
     * @return  Promise
     * */
    function fileReader({file = null, size = 200, width = 200, height = 200} = {}) {
        return new Promise((resolve, reject) => {
                if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                    reject(‘請字尾為jpg,png,gif的圖片‘);
                }
                let imgSize = file.size / 1024;  //計算檔案大小，單位kb
                if (imgSize > file.size) {
                    reject(‘請上傳大小不要超過‘ + size + ‘kb的圖片‘);
                }
                let reader = new FileReader();
                reader.onload = ((e) => {
                    //建立一個image物件，判斷寬高
                    let image = new Image();
                    image.onload = (() => {
                        if (image.width != width || image.height != height) {
                            reject("圖片寬高必須為：" + width + "*" + height);
                        }
                        resolve(e.target.result);
                    });
                    image.src = e.target.result;
                });
                reader.readAsDataURL(file);
            }
        )
    }
 

方法引數使用解構賦值，設定預設值，具體預設值請結合專案設定；使用Promise物件建立例項new Promise((resolve, reject) => {});resolve，reject是兩個函式，resolve將Promise物件的狀態從“未完成”變為“成功”，reject將Promise物件的狀態從“未完成”變為“失敗”，如果圖片不符合要求，相關提示通通呼叫reject函式。建立一個圖片物件，主要是獲取圖片的寬高做驗證，如果使用圖片裁剪，請忽略此步驟。如果寬高驗證成功，將圖片文字傳入給resolve函式。

呼叫fileReader函式

function fileLoad(e) { 
       let fileObj = {
            file: e.files[0],  //圖片物件
            size: 100,        //圖片最大為100kb
            width: 700,       //上傳圖片寬度
            height: 700       //上傳圖片高度
        }
        fileReader(fileObj).then(data => {
            //檔案預覽正確，將圖片展示到頁面
            document.getElementById("preview").innerhtml = "<img src=‘" + data + "‘/>";
            document.getElementById("error").innerhtml = "";
        }, error => {
            //檔案預覽出錯了,根據專案提示使用者
            document.getElementById("preview").innerHTML = "";
            document.getElementById("error").innerHTML = "錯誤資訊：" + error;
        });

    }

定義圖片上傳要求，根據fileReader處理情況，then方法可以接受兩個回撥函式作為引數。第一個回撥函式是Promise物件的狀態變為resolved時呼叫，第二個回撥函式是Promise物件的狀態變為rejected時呼叫。其中，第二個函式是可選的，不一定要提供。這兩個函式都接受Promise物件傳出的值作為引數。