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

谁践踏了优雅 2021-11-05 14:58 1485阅读 0赞

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