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

使用前须知:

  1. GitHub:localResizeIMG地址
  2. 这个项目已不再维护了,可能很长一段时间都不会更新了。
  3. 插件演示地址

引用:

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。
输出结果:
Vue压缩图片插件——localResizeIMG(简称lrz)_第1张图片
原理解读:

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.js学习之路,vue,javascript,js)