使用前须知:
- GitHub:localResizeIMG地址
- 这个项目已不再维护了,可能很长一段时间都不会更新了。
- 插件演示地址
引用:
npm i lrz -S // 注意:使用npm下载,不要使用cnpm下载,有坑
使用:
import lrz from "lrz";
本人使用的是Vant框架,获取file对象方法为:
<van-field name="uploader" label="图片上传" multiple>
<template #input>
<van-uploader v-model="fileList" :max-count="9" :after-read="afterRead"
:before-delete="deleteImg"/>
</template>
</van-field>
js:
afterRead(file) {
console.log(file);
console.log("压缩前大小:" + file.file.size / 1024);
lrz(file.file).then(function (rst) {
// 处理成功会执行
console.log(rst);
console.log("压缩后大小:" + rst.fileLen / 1024);
})
.catch(function (err) {
// 处理失败会执行
})
.always(function () {
// 不管是成功失败,都会执行
});
}
通过after-read方法获取file对象,注意:直接file对象应为file.file。
输出结果:
原理解读:
localResizeIMG插件
lrz(this.files[0], [options])
.then(function (rst) {
// 处理成功会执行
console.log(rst);
})
.catch(function (err) {
// 处理失败会执行
})
.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对象,里面存了一些原始文件的信息,例如大小,日期等;
官方文档:返回参数说明文档
完整例子:
document.querySelector('input').addEventListener('change', function () {
// this.files[0] 是用户选择的文件
lrz(this.files[0], {width: 1024})
.then(function (rst) {
// 把处理的好的图片给用户看看呗
var img = new Image();
img.src = rst.base64;
img.onload = function () {
document.body.appendChild(img);
};
return rst;
})
.then(function (rst) {
// 这里该上传给后端啦
/* ==================================================== */
// 原生ajax上传代码,所以看起来特别多 ╮(╯_╰)╭,但绝对能用
// 其他框架,例如jQuery处理formData略有不同,请自行google,baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5000/');
xhr.onload = function () {
if (xhr.status === 200) {
// 上传成功
} else {
// 处理其他情况
}
};
xhr.onerror = function () {
// 处理错误
};
xhr.upload.onprogress = function (e) {
// 上传进度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加参数
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');
// 触发上传
xhr.send(rst.formData);
/* ==================================================== */
return rst;
})
.catch(function (err) {
// 万一出错了,这里可以捕捉到错误信息
// 而且以上的then都不会执行
alert(err);
})
.always(function () {
// 不管是成功失败,这里都会执行
});
});