小程序图片压缩上传

背景：小程序司机回单图片上传，一次最多上传10张图片

//压缩货物照片
			compressGoodsPic() {
				return new Promise((resolve, reject) => {
					let handlegoodsPhotoList = []
					this.goodsPhotoList = this.$refs.uploadGoods.lists;
					let _this = this
					for (let index in this.goodsPhotoList) {
						handlegoodsPhotoList.push(this.goodsPhotoList[index].file.path)
						this.$refs.wCompressGood.start(handlegoodsPhotoList, {
							pixels: 2000000, // 最大分辨率，默认二百万
							width: 400,
							height: 500,
							quality: 0.2, // 压缩质量，默认0.8
							type: 'png', // 图片类型，默认jpg
							base64: true, // 是否返回base64，默认false，非H5有效
						}).then(res => {
							if (res) {
								for (let index in res) {
									delete this.goodsPhotoList[index].file
									this.goodsPhotoList[index].url = res[index]
								}
							}
							resolve(this.goodsPhotoList)
						}).catch(e => {
							console.log(e)
						})
					}
				});
			},

`

//压缩单据照片
			compressDocumentsPic() {
				return new Promise((resolve, reject) => {
					let handledocumentsPhotoList = []
					this.documentsPhotoList = this.$refs.uploadDocuments.lists;
					let _this = this
					for (let index in this.documentsPhotoList) {
						handledocumentsPhotoList.push(this.documentsPhotoList[index].file.path)
						this.$refs.wCompressDocument.start(handledocumentsPhotoList, {
							pixels: 2000000, // 最大分辨率，默认二百万
							quality: 0.2, // 压缩质量，默认0.8
							width: 400,
							height: 500,
							type: 'png', // 图片类型，默认jpg
							base64: true, // 是否返回base64，默认false，非H5有效
						}).then(res => {
							if (res) {
								for (let index in res) {
									delete this.documentsPhotoList[index].file
									this.documentsPhotoList[index].url = res[index]
								}
							}
							resolve(this.documentsPhotoList)
						}).catch(e => {
							console.log(e)
						})
					}
				});
			},

//提货
			submitPick() {
				this.$store.dispatch('loadingShowTrue')

				this.goodsPhotoList = this.$refs.uploadGoods.lists;
				this.documentsPhotoList = this.$refs.uploadDocuments.lists;
				
				//限制最多上传10张
				const listPic = [...this.goodsPhotoList, ...this.documentsPhotoList]
				if (listPic.length > 10) {
					uni.showToast({
						title: '最多只能上传10张',
						icon: 'error'
					})
					this.$store.dispatch('loadingShowFalse')
					return
				}

				//进行压缩
				let promise = {}
				if (this.$refs.uploadGoods.lists.length > 0 && this.$refs.uploadDocuments.lists.length > 0) {
					promise = Promise.all([
						this.compressGoodsPic(),
						this.compressDocumentsPic(),
					])
				} else if (this.$refs.uploadGoods.lists.length > 0 && this.$refs.uploadDocuments.lists.length === 0) {
					promise = Promise.all([
						this.compressGoodsPic(),
					])
				} else if (this.$refs.uploadGoods.lists.length === 0 && this.$refs.uploadDocuments.lists.length > 0) {
					promise = Promise.all([
						this.compressDocumentsPic(),
					])
				}
					//提交
				if (listPic.length > 0) {
					promise.then(async resp => {
						this.submitPickGoods()
					}).catch(e => {})
				} else {
					this.submitPickGoods()
				}
				}
			},
			async submitPickGoods() {
				let data = {
					handPickUpTime: new Date().getTime(),
					idWaybillPath: this.idtWaybillPath,
					idUser: this.idUser,
					idTenant: this.idTenant,
					idWaybill: this.idtWaybill,
					remark: this.remark,
					cargoPhotos: this.goodsPhotoList,
					documentsPhotos: this.documentsPhotoList
				}
				const res = await this.$http.post('driverWaybillApi/handPickUp', data, '1')
				if (res.data.status == "success") {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: "success",
						duration: 3000,
					})
					uni.setStorageSync('waybillType', 1);
					uni.switchTab({
						url: '/pages/waybill/waybillIndex',
						success: function(e) {
							let page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					});
				}
			}
		}

总结：图片需要压缩后提交base64格式的给后台，压缩图片是异步操作，点提交按钮时，图片还没压缩完，导致后台报错图片过大/图片格式错误，所以使用promise函数等返回成功状态再提交给后台