localResizeIMG:图片压缩上传

vant-ui Uploader 图片上传组件 + localResizeIMG 实现图片压缩上传：

一、npm安装：

npm install lrz复制代码

二、main.js中写入

import lrz from 'lrz'复制代码

三、组件中使用

lrz(file, [options]).then(function (rst) {// 处理成功会执行console.log(rst);}).catch(function (err) {// 处理失败会执行}).always(function () {// 不管是成功失败，都会执行});复制代码

四、参数说明：

压缩图片：lrz(file, [options]);

file 通过 input:file 得到的文件，或者直接传入图片路径

[options] 这个参数允许忽略

width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设定时会适应宽度

height {Number} 图片的最大高度，默认为原图高度

quality {Number} 图片压缩质量，取值 0 - 1，默认为 0.7

fieldName {String} 后端接收的字段名，默认：file

返回结果：promise 对象

then(rst) 处理成功后执行

　　　　rst.formData 后端可处理的数据

　　　　rst.file 压缩后的file对象，如果压缩率太低，将会是原始file对象

　　　　rst.fileLen 生成后的图片的大小，后端可以通过此值来校验是否传输完整

　　　　rst.base64 生成后的图片base64，后端可以处理此字符串为图片，

也可以直接用于 img.src = base64

　　　　rst.base64Len 生成后的base64的大小，后端可以通过此值来校验是否传输完整

　　　　rst.origin 也就是原始的file对象，里面存放了一些原始文件的信息，例如大小、日期等

异步上传：processData 和 contentType 必须设为 false，否则服务端不会响应

完整源码：vant-ui Uploader 图片上传组件 + localResizeIMG 实现图片压缩上传：

html源码：

    <van-uploader 
    :after-read="onRead2"
    accept="image/*"
    name="imgFile"
    multiple
    class="file"/>
    <img id="shopImg" v-show="msg.imgSrc2" :src="msg.imgSrc2">复制代码

JS源码：
onRead(file) {
    this.loading = true;
    let content = file.file;
    if (content){
    lrz(content)
        //处理成功会执行
        .then((rst)=> {
            //请求后台接口，将压缩后的base64传过去
            this.$http.post('api/mobile/index.php?w=index&t=upload_img_base64',{
                base64_img:rst.base64
            })
            .then( res => {
                let datas = res.data.datas.path;    //得到后台返回的URL地址存入data定义的属性imgSrc中，并在页面展示
                this.imgSrc = `${datas}`;
                })
            })
        };
        .catch(function (err) {
            // 处理失败后执行
        })
        .always(function () {
            // 成功和失败都执行
        })
},复制代码

转载于:https://juejin.im/post/5ceb4d386fb9a07ed0648f47