Vue lrz localResizeIMG 压缩图片

文章目录

1.下载依赖

npm i lrz

2.引入要使用的页面

 import lrz from 'lrz'

3.使用lrz压缩图片

  /**
       * 添加图片
       * */
      afterRead(file) {

        file.status = 'uploading';//这两行是vant上传图片的上传状态,可已不用管
        file.message = '上传中...';

        if (file.file.size > 1048576) {//根据图片字节去判断是否压缩图片 以1M为例
          //大于1M
          var th = this

          //file.file代码要要压缩的文件,后边跟的是一些压缩配置quality代表压缩后的质量

          lrz(file.file, { quality: 0.8 })
            .then(function(rst) {

              //压缩成功执行上传 addHead上传接口

              addHead(rst.formData).then((ref) => {
                if (ref.msg == '成功') {
                  file.status = 'done'
                  th.imgList.push({
                    imgUrl: ref.body
                  })
                } else {
                  setTimeout(() => {
                    file.status = 'failed';
                    file.message = '上传失败';
                  }, 1000);
                }
              })
            }).catch(function(error) {
              //压缩失败输出失败原因

              console.log(error)
            }).always(function() {
              //不管成功或失败，都会执行
            })
        } else {
          // 小于1M直接上传
          let formData = new FormData();

          let f = base64File(file.content)
          formData.append("file", f);
          addHead(formData).then((ref) => {
            console.log(ref)
            if (ref.msg == '成功') {
              file.status = 'done'
              this.imgList.push({
                imgUrl: ref.body
              })
            } else {
              setTimeout(() => {
                file.status = 'failed';
                file.message = '上传失败';
              }, 1000);
            }
          })
        }
      }

4.压缩传入参数

lrz(file, [options]);

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

　　[options] 这个参数允许忽略

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

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

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

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

5.promise 对象 执行后一些返回数据

　　then(rst) 处理成功后执行

　　　　rst.formData 后端可处理的数据

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

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

　　　　rst.base64 生成后的图片base64，后端可以处理此字符串为图片，也可以直接用于 img.src = base64

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

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