Vue压缩图片插件——localResizeIMG(简称lrz)

使用前须知：

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 () {// 不管是成功失败，这里都会执行});
});

Vue压缩图片插件——localResizeIMG(简称lrz)相关推荐

jquery压缩图片插件
imageCompress 只有图片压缩功能,比较简单 jquery.imageCompress.js 使用说明: el:为上传框 quality:压缩图片质量,单位为% onloadStart:读取 ...
前端Vue压缩图片视频ZIP
项目要求数据的图片.表格.视频进行zip压缩打包,刚开始的时候是后端返回链接直接下载,有点消耗服务器带宽. 然后就想着后端直接返回数据的链接,前端浏览器进行处理. 因为后端返回来的是图片或者视频的链 ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
Vue lrz localResizeIMG 压缩图片
文章目录 1.下载依赖 npm i lrz 2.引入要使用的页面 import lrz from 'lrz' 3.使用lrz压缩图片 /*** 添加图片* */afterRead(file) {fil ...
vue使用lrz进行压缩图片
在vue中使用lrz去压缩图片 lrz是一款压缩图片成base64的插件,兼容IE10以上及大部分非IE浏览器(chrome.微信什么的) 但是lrz团队已经放弃维护了,所以使用的时候需要谨慎使用的 ...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
压缩图片lrz.all.bundle.js插件
参考文章 https://blog.csdn.net/Fiona_lms/article/details/80813112 <!doctype html> <html lang=& ...
LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
vue 实现压缩图片上传到oss
我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样.你可能选择使用 ...

Vue压缩图片插件——localResizeIMG(简称lrz)

Vue压缩图片插件——localResizeIMG(简称lrz)相关推荐

最新文章

热门文章