uniapp 上传图片转换base64并且压缩

首先引入压缩的封装文件

//压缩base64图片
export default function compress(base64String, w, quality) {
    // console.log(base64String.length);
    var getMimeType = (urlData) => {
        var arr = urlData.split(",");
        var mime = arr[0].match(/:(.*?);/)[1];
        // return mime.replace("image/", "");
        return mime;
    };
    var newImage = new Image();
    var imgWidth, imgHeight;

    var promise = new Promise((resolve) => (newImage.onload = resolve));
    newImage.src = base64String;
    return promise.then(() => {
        imgWidth = newImage.width;
        imgHeight = newImage.height;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        if (Math.max(imgWidth, imgHeight) > w) {
            if (imgWidth > imgHeight) {
                canvas.width = w;
                canvas.height = (w * imgHeight) / imgWidth;
            } else {
                canvas.height = w;
                canvas.width = (w * imgWidth) / imgHeight;
            }
        } else {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
        var base64 = canvas.toDataURL(getMimeType(base64String), quality);
        console.log(base64);
        return base64;
    });
}

可以直接复制 在需要的页面中引入

这是转换 base64的封装函数

	//blob转base64
			blobToBase64(blob) {
				return new Promise((resolve, reject) => {
					const fileReader = new FileReader();
					fileReader.onload = (e) => {
						resolve(e.target.result);
					};
					fileReader.readAsDataURL(blob);
					fileReader.onerror = () => {
						reject(new Error("文件流异常"));
					};
				});
			},

然后是上传图片 

我这里没有用uni给的上传图片api 用的自己封装的请求也可以换成uni的api

	// 上传图片
			Inimage() {
				// 重定义指向
				let _this = this
				uni.chooseImage({
					// 成功的回调
					success(file) {
						console.log(file);
						// 查找图片的大小进行判断
						let inst = file.tempFilePaths.find(ele => ele.size > 1024 * 1024)
						if (inst) {
							uni.showToast({
								title: "图片大小不能超过1m",
								icon: 'none'
							})
						}
						_this.imagelist.push(...file.tempFilePaths)
						//判断如果 imagelist 有值 就隐藏
						if (_this.imagelist) {
							_this.Show = false
						}
						// 转换 base 64 
						_this.blobToBase64(file.tempFiles[0]).then((res) => {
							let compressBase64Img = "";
							new Promise((resolve, reject) => {
								compressBase64Img = compress(res, 500, 0.9); //conpress封装的压缩方法
								resolve(compressBase64Img);
							}).then((response) => {
								// response 就是压缩好的图片
								// 上传图片的封装请求
								pull_up({
									face: response
								}).then(res => {
									console.log(res, '成功');
									if (res.data.code == 1) {
										uni.showToast({
											title: '上传成功',
											icon: 'none'
										})
										_this.ImageData = res.data.data
										console.log(_this.ImageData, 'img');
									} else {
										uni.showToast({
											title: '图片上传失败请重新上传',
											icon: 'error'
										})
									}
								})
							});
						});


					}
				})

			},