使用uniapp实现图片压缩上传，支持小程序和H5

weixin_42116704

于 2022-06-22 15:54:22 发布

阅读量964

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_42116704/article/details/125410923

版权

本文介绍了如何在uniapp中针对小程序和H5平台实现图片压缩上传的功能，详细阐述了不同环境下图片压缩的实现策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景，uniapp，实现小程序和H5图片压缩上传

这里做了环境区分，不同环境，使用不同的压缩方式

<!-- #ifndef H5 -->
		<canvas canvas-id="canvas" id="canvas" :style="'width:' + canvasWidth +'px;height:' + canvasHeight + 'px;position:absolute;left:-10000px;top:-10000px'"></canvas>
		<!-- #endif -->

//下面是具体实现函数

uploadFile(){
				uni.chooseImage({
					count:1,
					sizeType:"compressed",
					success: (chooseImageRes) => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef H5
						this.recursionCompressH5(tempFilePaths[0],(res)=>{
							this.upImg(res)
						})
						// #endif
						// #ifndef H5
						this.recursionCompressMP(tempFilePaths[0],(res)=>{
							this.upImg(res)
						})
							// this.upImg(tempFilePaths[0])
						// #endif
					}
				});
			},
			upIm

最低0.47元/天解锁文章