uniapp小程序选择图片裁剪后上传

uniapp小程序选择图片裁剪后上传

微信api wx.cropImage

1. 直接上代码

chooseImage() {
	var _this = this
	this.showHide = false
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], //从相册选择、摄像头
		success: function(res) {
			// 判断图片大小
			if (res.tempFiles[0].size / 1024 / 1024 <= 10) {
				const tempFilePaths = res.tempFilePaths;
                 // 此方法 只能真机使用过
				wx.cropImage({
					src: tempFilePaths[0], // 图片路径
					cropScale: '1:1', // 裁剪比例
					success: (data) => {
						console.log(data.tempFilePath, 'KKKKKKK')
						uni.showLoading({
							title: '照片上传中...',
							mask: true
						})
						const uploadTask = uni.uploadFile({
							url: getApp().globalData.requestUrl + 'base/common/file/qiniu/upload', // 服务器上传接口地址
							filePath: data.tempFilePath,
							name: 'images', // 必须填写，后台用来接收文件
							success: (uploadFileRes) => {
								console.log(uploadFileRes, 'uploadFileRes')
								let data = JSON.parse(uploadFileRes.data)
								if (data.code == 1 && data.data && data.data[0]) {
									// 这是上传后的服务器地址
									_this.humanImg = data.data[0].maxImageUrl
									
								}
								setTimeout(() => {
									_this.showHide = true
									uni.hideLoading()
								}, 1000)
							},
							fail: (uploadFileErr) => {
								console.error('upload fail:', uploadFileErr);
								uni.hideLoading()
								                                                                                                                                                                                  .showHide = true
							}
						});
						// 监听上传进度变化
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (uploadFileErr) => {
						console.error('upload fail:', uploadFileErr);
					}
				})
			} else {
				uni.showToast('上传图片不可超过10M')
			}
		}
	});
}

2. 完成！