使用图片压缩插件localResizeIMG上传图片

场景：上传给后台前，如果图片过大，需要压缩一下再上传给后台

在vue项目中可以使用localResizeIMG插件进行压缩

• 在项目内与后台商定的图片接口：直接传一个formData对象（里面需包含file文件与接口方法参数）
• lrz接口回调放回有压缩后的file（blob对象）、formData对象（包含file对象）

开始！！

安装插件：

npm i lrz -save
yarn add lrz -S
//yarn 安装

引入

在main.js里加入：import lrz from ‘lrz’
//不用vue.use就可以直接引用

代码

var localFile = document.getElementById("uploadFileAdd").files[0];
            // 判断大小
            const isLt10M = localFile.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.showToast(true, "上传图片大小不能超过 10MB!");
                return;
            }
            var thes = this;
            // 压缩图片
            lrz(localFile, {
              quality:0.6

          }).then(function(rst) {
            rst.formData.append("type", thes.imgType);
            rst.formData.append("service", "UploadFileService");
            rst.formData.append("sysAppName", "business");
            rst.formData.append("method", "upload");
            thes.$store
                .dispatch("order/getOrderList", rst.formData)
                .then(res => {
                    let img = { url: res.filePath };
                    thes.fileList.push(img);
                    thes.showToast(true, "图片上传成功");
                })
                .catch(e => {
                    console.log("res11", res);
                });
            }).catch(function(error) {
                console.log("erroree",error);
                
            }).always(function() {
                console.log("alway");
            })

lrz函数解析

lrz( file, [ options ] )  
            .then(function(rst) {
                //成功时执行回调
            }).catch(function(error) {
                //失败时执行回调
            }).always(function() {
                //不管成功或失败，都会执行
            })

官方api

lrz(file, [options]);

[options] 这个参数允许忽略
width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
height {Number} 同上
quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
fieldName{String} 后端接收的字段名，默认：file

官方插件GitHub地址：lrz