场景:上传给后台前,如果图片过大,需要压缩一下再上传给后台
开始!!
安装插件:
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