uniApp 内嵌uniApp H5项目中的上传图片压缩

闲人有点忙

于 2020-01-19 15:57:25 发布

阅读量2.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_39598092/article/details/104041663

版权

本文介绍了如何在uniApp内嵌的H5项目中实现图片上传和压缩功能。通过子组件选择相册或相机获取图片，然后利用canvas进行图片压缩，最终将压缩后的图片路径传递给父组件，用于更新头像。

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

父组件：

引入子组件

<prompPhoto :showPhoto="showPhoto" :photoOptions="photoOptions"></prompPhoto>

方法接受子组件传过来的压缩图片路径从而对头像进行修改

changePhoto(){
				let _this = this;
				this.showPhoto = true;
				this.photoOptions = {
					//隐藏弹出框
					change(){
						_this.showPhoto = false;
					},
					// 图片上传成功
					success(res){
						_this.showPhoto = false;
						_this.prePhoto = true;
						_this.previewPhoto = res;
						console.log('上传图片路径',res)
						updateImgAPI({
							filePath:res,
							formData:{
								'memberid':_this.userId,
							},
							name:'pic'
						}).then( res => {
							console.log(res)
						})
					}
				}
			},

子组件：

选择相册还是相机，canvas进行图片压缩

//从相册选择图片
			albumPhoto(){
				this.uploadPhoto('album')
			},
			cameraPhoto(){

最低0.47元/天解锁文章