uni-app h5 上传图片 压缩图片

由于uni-app h5 不支持sizeType,如果需要压缩图片就只能自己去实现了。

1. 选择图片:


				uni.chooseImage({
					count: 6, //默认9
					// sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let tempPaths = res.tempFilePaths
						if(tempPaths.length + _this.imgList.length > 6) {
							uni.showToast({
								title: '上传图片最多可选6张',
								icon: 'none'
							})
						} else {
							_this.imgList = _this.imgList.concat(tempPaths)
							_this.compressImage()
						}
					}
				})

			compressImage(){
				for(let i in this.imgList){
					let imgFile = this.imgList[i]
					this.getImageInfo(imgFile)
				}
			},

 2. 获取图片信息并压缩

// 获取图片信息
			getImageInfo(src) {
				let _this = this
				uni.getImageInfo({
					src,
					success(res) {
						console.log('压缩前', res)
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						canvas.width = canvasWidth / 2
						canvas.height = canvasHeight / 2
						ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2)
						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc)
							console.log('压缩后', imgSrc)
							_this.uploadFile(imgSrc)
						})
					}
				})
			},

3. 上传

// 上传图片
			uploadFile(filePath) {
				let _this = this
				uni.uploadFile({
					url: '/api/api/Profile/UploadImg',
					name: 'file',
					filePath,
					formData: {},
					success: (res) => {
						let { data } = JSON.parse(res.data)
						_this.imgResults.push(data)
					},
					fail: (err) => {
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				});
			},

 

  • 4
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俊刚、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值