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'
						})
					}
				});
			},

 

你可能感兴趣的:(uni-app)