uni-app 压缩图片（base64上传）包含图片验证

第一步选择图片

data(){
   return{
    imageType: ['image/png', 'image/jpeg', 'image/jpg'],//图片验证类型
    }
}

uni.chooseImage({
					count: 1, //
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						var size = res.tempFiles[0].size; //69457
						var type = res.tempFiles[0].type; //image/png
						var name = res.tempFiles[0].name;
				        imageType: ['image/png', 'image/jpeg', 'image/jpg'],
						if (!this.imageType.includes(type)) { //没在
							uni.showToast({
								title: '图片类型不合法',
								duration: 2000,
								icon: 'none'
							})
							return;
						}

						if ((size / 1024) > (1024 * 5)) {
							uni.showToast({
								title: '图片文件不能大于5M!',
								duration: 2000,
								icon: 'none'
							})
							return;
						}

						uni.showLoading({
							title: "压缩图片中..."
						})
                         //调用图片压缩接口
						this.photoCompress(res.tempFiles[0], (base64Codes) => {
							uni.hideLoading();
                            //base64Codes 地址
							//this.base64ToImage(base64Codes)//后台请求地址普通post
                            //犹豫base64地址过长 所以使用post接收
						
						}, type)

					}
				});

图片压缩接口

photoCompress: function(file, objDiv, type) {
				var ready = new FileReader();
				ready.readAsDataURL(file);
				const _this = this;
				ready.onload = function() {
					var fileResult = this.result;
					_this.canvasDataURL(fileResult, objDiv, type)
				}
			},
canvasDataURL: function(path, callback, type) {
				var img = new Image();
				img.src = path;
				var objCompressed = {}
				img.onload = function() {
					var that = this;
					//默认压缩后图片规格（0.1-1）越小压缩越强，质量越差
					var quality = 0.6;
					var w = that.width;
					var h = that.height;
					var scale = w / h;
					//实际要求
					w = objCompressed.width || w;
					h = objCompressed.height || (w / scale);
					//生成canvas
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					// 创建属性节点
					var anw = document.createAttribute("width");
					anw.nodeValue = w;
					var anh = document.createAttribute("height");
					anh.nodeValue = h;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					ctx.drawImage(that, 0, 0, w, h);

					var base64 = canvas.toDataURL(type, quality);
					// 回调函数返回base64的值
					callback(base64);
				}
			},

注：该代码适用于H5版本，其他版本调用uni-app接口即可。

注：无需在CSS上创建canvas，直接Copy Code 即可使用。

附加：base64转换 file文件流

 _base64ConvertFile :function (urlData, filename, title) {
			  // 64转file
			  var arr = urlData.split(",");
			  var type = arr[0].match(/:(.*?);/)[1];
			  var fileExt = type.split("/")[1];
			  var bstr = atob(arr[1]);
			  var n = bstr.length;
			  var u8arr = new Uint8Array(n);
			  while (n--) {
			    u8arr[n] = bstr.charCodeAt(n);
			  }
			  return new File([u8arr], `${title || "filename"}.` + fileExt, {
			    type: type,
			  });
			},

网络图片转base64:

function getBase64(imgUrl) {
		  window.URL = window.URL || window.webkitURL;
		  var xhr = new XMLHttpRequest();
		  xhr.open("get", imgUrl, true);
		  // 至关重要
		  xhr.responseType = "blob";
		  xhr.onload = function () {
		    if (this.status == 200) {
		      //得到一个blob对象
		      var blob = this.response;
		      console.log("blob", blob)
		      // 至关重要
		      let oFileReader = new FileReader();
		      oFileReader.onloadend = function (e) {
		        // 此处拿到的已经是 base64的图片了
		        let base64 = e.target.result;
		        console.log("方式一》》》》》》》》》", base64)
		      };
		      oFileReader.readAsDataURL(blob);
		      //====为了在页面显示图片，可以删除====
		      var img = document.createElement("img");
		      img.onload = function (e) {
		        window.URL.revokeObjectURL(img.src); // 清除释放
		      };
		      let src = window.URL.createObjectURL(blob);
		      img.src = src
		      //document.getElementById("container1").appendChild(img);
		      //====为了在页面显示图片，可以删除====
		
		    }
		  }
		  xhr.send();
		}

使用：