[組件]—— 圖片上傳預覽 組件（移動端）

以前的一篇博客：移動端H5圖片預覽和壓縮，實現了基本的功能。此次則計劃作成一個組件，可供前臺、後臺使用。

首先，咱們先來捋一捋想要實現的功能：

• 預覽
• 刪除
• 壓縮
• 上傳到服務器

基本機構

這樣，咱們的組件結構就有了：

;!function(window, $, undefined){
    function Upload() { };

    Upload.prototype.change = function() { };

    Upload.prototype.del = function() { };

    Upload.prototype.compress = function() { };

    Upload.prototype.submit = function() { };

}(window, jQuery)

主要API

接下來，介紹一下組件須要用到的幾個API：

• FileList
  // 獲取上傳文件的 FileList document.getElementById('inputId').files
• window.URL.createObjectURL(file)：返回一個關於圖片地址url的blob格式
• createImageBitmap(file)：返回一個imageBitmap對象，它包含着文件的相關信息
• canvas.drawImage(imageBitmap)：將圖片畫在canvas畫布上，對圖片大小進行縮放
• canvas.toBlob()：轉化爲blob對象，能夠對圖片質量進行更改
• FormData：將上傳圖片保存在FormData的實例上，上傳到服務器

DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload