前端壓縮圖片 -- vue項目使用localResizeIMG插件 -- 實例

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

這位博主詳細的介紹了localResizeIMG插件的安裝, 引用, 使用, 參數, 返回值. 十分受用.

本博沒有新的東西, 都是東拼西湊的. 但是, 組合出了個寶貝, 包括: 文件類型/寬高/大小的校驗, 還有展示圖片

<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('都會執行');
        })


    },