localResizeIMG:图片压缩上传

客官°小女子只卖身不卖艺 2022-01-20 04:59 447阅读 0赞

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 () {
                // 成功和失败都执行
            })
    },复制代码