前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例

参照博客: https://blog.csdn.net/qq_34794264/article/details/80278243

这位博主详细的介绍了localResizeIMG插件的安装, 引用, 使用, 参数, 返回值. 十分受用.

参照博客: https://www.cnblogs.com/manongxiaobing/p/4720568.html
这位博主有指出插件的不足之处, 还有个修复插件

本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片

<input
  accept="image/*"
  type="file"
  name="avatar"
  id="avatar"
  @change="upload($event,'orderImages')"
>

// 图片上传
    upload(e, image) {
      this.formData = new window.FormData();
      let file = e.target.files[0];
      // console.log("file", file, "e", e);

      // 没有图片, 返回
      if (!file) {
        return;
      }
      // 仅支持png/jpf/jpeg/bmp类型图片
      let type = file.type;
      if (
        !(
          type == "image/png" ||
          type == "image/jpg" ||
          type == "image/jpeg" ||
          type == "image/bmp"
        )
      ) {
        // this.updis = true;
        return (
          this.$vux.toast.text(
            `图片格式不对，请上传JPEG/JPG/BMP/PNG格式图片`,
            "middle"
          ),
          (e.target.value = "")
        );
      }
      // 使用神奇插件, lrz就是它提供的方法
      lrz(file, {width: 4096, height: 4096, quality: 0.5, filedName: 'file'})
        .then((rst) => {
          // console.log('成功时', rst);
          // 判断大小 (base64编码urlencode后大小不超过4M)
          let size = rst.fileLen / 1024 / 1024;
          if (size > 4) {
            // this.updis = true;
            return (
              this.$vux.toast.text(`图片太大，请上传小于4M的图片`, "middle"),
              (e.target.value = "")
            );
          }

          // 获取上传的文件的宽高 (最短边至少15px，最长边最大4096px)  ⇒ 同一部社保拍摄的图片, 宽高一样. 在此贴出, 是作为一个获取图片宽高的方法展示
          // let imgobj = new Image();
          // imgobj.src = rst.base64;
          // console.log('imgobj');
          // console.dir(imgobj);
          // imgobj.onload = () => {
          //   console.log(imgobj.height);
          //   console.log(imgobj.width);
          //   if (imgobj.height < 15 || imgobj.width < 15) {
          //     this.$vux.toast.text("最短边至少15px", "middle");
          //     return;
          //   }
          //   if (imgobj.height > 4096 || imgobj.width > 4096) {
          //     this.$vux.toast.text("最长边最大4096px", "middle");
          //     return;
          //   }

          // };
		
		 	// 给用户看看图片
          let imgobj = new Image();
          imgobj.src = rst.base64;
          
          // 图片校验完毕, 收集参数
          rst.formData.append("flag ", "front");
		  
          this.$http
			.post("api/idCard", rst.formData)
			.then(({ data }) => {
				// console.log(data);
				let _this = this;
				if (data.code == "200") {
				} else {
					this.$vux.alert.show({
					content: "识别失败, 请重新识别"
					});
					return e.target.value = '';
				}
			});  
          // return rst.formData;
        })
        .catch(function(error){
          // console.log('失败时', error);
          this.$vux.toast.text(`图片上传失败,${data.msg}`, "middle");
          this[image].pop();
          e.target.value = "";
        })
        .always(function(){
          // console.log('都会执行');
        })


    },