Vue.js移動端圖片壓縮---localResizeIMG

今天工作，做到圖片上傳的，后端說讓我壓縮了之后再發送請求，好吧，之前都沒有做過壓縮，這是又要讓我get一種技能的節奏，於是百度找了一圈，發現一個應該是可以用的---localResizeIMG

遺憾的是，看到了筆着這樣的說明：

 

 本來想換一個，可是看到這個評價還可以，於是就決定用這個了

根據他的說明，先獲取

npm i lrz

例子1：

<input type="file"  accept="image/*" @change="compressImg" capture="camera" />  
accept是為了規定通過文件上傳來提交的文件的類型，capture是webApp中捕獲到系統默認的設備，camera--照相機；camcorder--攝像機；microphone--錄音。

使用函數：

compressImg(e){
    if (e.target.files){
      // lrz(file,[ options ])
      lrz( e.target.files[0], [ options ] )  
            .then(function(rst) {
                //成功時執行
            }).catch(function(error) {
                //失敗時執行
            }).always(function() {
                //不管成功或失敗，都會執行
            })
    };
}

[options]可以有下面幾個屬性：

屬性 值類型 屬性說明
width number 圖片最大的寬度，默認為原圖的寬度
height number 圖片最大的高度，默認為原圖的高度
quality number 圖片壓縮質量，取值0-1，默認為0.7
filedName string 后端接收的字段名，默認為 ‘file’

成功回調：

rst.formData; //后端可處理的數據；

rst.file; //壓縮后的file對象（默認應丟在rst.formData里面），需要注意的是：如果壓縮率太大的話，這個會是原始的file對象；

rst.fileLen; //生成后的圖片大小，后端可通過此值來校驗是否傳輸完整;

rst.base64; //生成后的圖片base64，后端可以處理此字符串為圖片，也直接用於img.src = base64；

rst.base64Len; //生成后的base64的大小，后端可以通過此值來校驗是否傳輸完整 (如果采用base64上傳方式)；

rst.origin; //也就是原始的file對象，里面存了一些原始文件的信息，例如大小，日期等；

由於我是用插件寫的，所以不用清空，如果需要的話，可以在always中調用

e.target.value = null; //清空上傳value的值

具體參數即使用可以看相關文檔：https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3

 

方式2：

如果圖片不是來自用戶上傳的，也可以直接傳路徑：

lrz('./xxx/xx/x.png')
        .then(function (rst) {
            // 處理成功會執行
        })
        .catch(function (err){
            // 處理失敗會執行
        })
        .always(function () {
            // 不管是成功失敗，都會執行
        });

 

 

 

具體可以看他的git上面的說明：https://github.com/think2011/localResizeIMG