巡检拍照功能及bug修复

components/helang-compress/helang-compress.vue

@@ -0,0 +1,175 @@
+<template>
+	<view class="compress">
+		<canvas :style="{ width: canvasSize.width,height: canvasSize.height}" canvas-id="myCanvas"></canvas>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				pic:'',
+				canvasSize: {
+					width: 0,
+					height: 0
+				}
+			}
+		},
+		methods: {
+			// 压缩
+			compress(params) {
+				return new Promise(async (resolve, reject) => {
+					// 等待图片信息
+					let info = await this.getImageInfo(params.src).then(info=>info).catch(err=>err);
+					
+					if(!info){
+						reject('获取图片信息异常');
+						return;
+					}
+					
+					// 设置最大 & 最小 尺寸
+					const maxSize = params.maxSize || 1080;
+					const minSize = params.minSize || 640;
+					
+					// 当前图片尺寸
+					let {width,height} = info;
+					
+					// 非 H5 平台进行最小尺寸校验
+					// #ifndef H5
+					if(width <= minSize && height <= minSize){
+						resolve(params.src);
+						return;
+					}
+					// #endif
+					
+					// 最大尺寸计算
+					if (width > maxSize || height > maxSize) {
+						if (width > height) {
+							height = Math.floor(height / (width / maxSize));
+							width = maxSize;
+						} else {
+							width = Math.floor(width / (height / maxSize));
+							height = maxSize;
+						}
+					}
+
+					// 设置画布尺寸
+					this.$set(this,"canvasSize",{
+						width: `${width}rpx`,
+						height: `${height}rpx`
+					});
+					
+					// Vue.nextTick 回调在 App 有异常，则使用 setTimeout 等待DOM更新
+					setTimeout(() => {
+						const ctx = uni.createCanvasContext('myCanvas', this);
+						ctx.clearRect(0,0,width, height)
+						ctx.drawImage(info.path, 0, 0, uni.upx2px(width), uni.upx2px(height));
+						ctx.draw(false, () => {
+							uni.canvasToTempFilePath({
+								x: 0,
+								y: 0,
+								width: uni.upx2px(width),
+								height: uni.upx2px(height),
+								destWidth: width,
+								destHeight: height,
+								canvasId: 'myCanvas',
+								fileType: params.fileType || 'png',
+								quality: params.quality || 0.9,
+								success: (res) => {
+									// 在H5平台下，tempFilePath 为 base64
+									resolve(res.tempFilePath);
+								},
+								fail:(err)=>{
+									reject(null);
+								}
+							},this);
+						});
+					}, 300);
+				});
+			},
+			// 获取图片信息
+			getImageInfo(src){
+				return new Promise((resolve, reject)=>{
+					uni.getImageInfo({
+						src,
+						success: (info)=> {
+							resolve(info);
+						},
+						fail: () => {
+							reject(null);
+						}
+					});
+				});
+			},
+			// 批量压缩
+			batchCompress(params){
+				// index:进度，done:成功，fail:失败
+				let [index,done,fail] = [0,0,0];
+				// 压缩完成的路径集合
+				let paths = [];
+				// 批量压缩方法
+				let batch = ()=>{
+					return new Promise((resolve, reject)=>{
+						// 开始
+						let start = async ()=>{
+							params.progress && params.progress({
+								done,
+								fail,
+								count:params.batchSrc.length
+							});
+							// 等待图片压缩方法返回
+							let path = await next();
+							if(path){
+								done++;
+								paths.push(path);
+							}else{
+								fail++;
+							}
+							
+							index++;
+							// 压缩完成
+							if(index >= params.batchSrc.length){
+								resolve(true);
+							}else{
+								start();
+							}
+						}
+						start();
+					});
+				}
+				// 依次调用压缩方法
+				let next = ()=>{
+					return this.compress({
+						src:params.batchSrc[index],
+						maxSize:params.maxSize,
+						fileType:params.fileType,
+						quality:params.quality,
+						minSize:params.minSize
+					})
+				}
+				
+				// 全部压缩完成后调用
+				return new Promise(async (resolve, reject)=>{
+					// 批量压缩方法回调
+					let res = await batch();
+					if(res){
+						resolve(paths);
+					}else{
+						reject(null);
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.compress{
+		position: fixed;
+		width: 12px;
+		height: 12px;
+		overflow: hidden;
+		top: -99999px;
+		left: 0;
+	}
+</style>

manifest.json

@@ -129,7 +129,7 @@
         "title" : "智慧消防",
         "router" : {
             "mode" : "hash",
-            "base" : "/work/"
+            "base" : ""
         },
         "devServer" : {
             // "https" : true,
@@ -143,7 +143,7 @@
                     }
                 }
             },
-            "https" : false
+            "https" : true
         },
         "domain" : "https://qhome.usky.cn/",
         "sdkConfigs" : {

pages/xunJian/planDetail/planDetail.vue

@@ -35,13 +35,13 @@
 					上传图片：
 				</view>
 
-				
-				<view class="unload-box"  @tap="goCamera()">
-					
-			
+
+				<view class="unload-box" @tap="goCamera()">
 					<image v-if="this.imgUrl" mode="aspectFit" style="width:70rpx;height:70rpx" :src="this.imgUrl"
 						:data-src="this.imgUrl"></image>
-						<view v-else style="background:rgb(223 215 215 / 63%);font-size:22rpx;line-height:40rpx;margin-top:20rpx;padding:0 20px;display:inline-block;border-radius:10rpx">请上传 + </view>
+					<view v-else
+						style="background:rgb(223 215 215 / 63%);font-size:22rpx;line-height:40rpx;margin-top:20rpx;padding:0 20px;display:inline-block;border-radius:10rpx">
+						请上传 + </view>
 				</view>
 			</view>
 			<view class="form-item margin-top">
@@ -56,11 +56,19 @@
 				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(addSubmit)">提 交 </button>
 			</view>
 		</form>
+		
+		<helang-compress ref="helangCompress"></helang-compress>
+
 	</view>
 </template>
 
 <script>
+	import helangCompress from '../../../components/helang-compress/helang-compress';
+
 	export default {
+		components: {
+			helangCompress
+		},
 		data() {
 			return {
 				noClick: true,
@@ -72,7 +80,15 @@
 				reportName: '',
 				radioOne: 0,
 				zb_id: 0,
-				hasRes:0
+	
+				params: {
+					maxSize: 800,
+					fileType: 'png',
+					quality: 0.85,
+					minSize: 640
+				},
+				
+				
 			}
 		},
 
@@ -82,15 +98,6 @@
 		},
 
 		mounted() {
-			// 创建附件上传
-			// var _self = this;
-			// var input = document.createElement('input'); //创建元素
-			// input.type = 'file' //添加file类型
-			// input.onchange = (event) => {
-			// 	_self.upFile(input, event)
-			// }
-			// this.$refs.input.$el.appendChild(input)
-
 		},
 		methods: {
 			radioChange(e) {
@@ -103,72 +110,53 @@
 				uni.chooseImage({
 					count: 1, // 最多可以选择的图片张数
 					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
-					sourceType: ['camera','album'],
+					sourceType: ['camera', 'album'],
 					success: function(res) {
 						console.log(res);
 						that.imgUrl = res.tempFilePaths[0];
 						var tempFilePaths = res.tempFilePaths[0];
-						
-						
-						alert(1)
-						alert(tempFilePaths)
-						
-						setTimeout(function(){
+
+						that.$refs.helangCompress.compress({
+							src: tempFilePaths,
+							maxSize: that.params.maxSize,
+							fileType: that.params.fileType,
+							quality: that.params.quality,
+							minSize: that.params.minSize
+						}).then((res) => {
+							uni.hideLoading();
+							// uni.showToast({
+							// 	title: "压缩成功",
+							// 	icon: "success"
+							// })							
+							tempFilePaths = [res][0];
 							
 							uni.uploadFile({
 								url: that.$BASE_URL + 'Inspection/setUpload',
 								filePath: tempFilePaths,
 								name: 'file',
-								
-								// header: {
-								//         'content-type': 'multipart/form-data' 
-								//     },
-								formData: {
-									// 'user': 'test'
-									
-								},
 								success: (uploadFileRes) => {
 									
-									console.log('uploadFileRes')
+									uni.showToast({
+										title: "上传成功",
+										icon: "success"
+									})	
 									that.img = JSON.parse(uploadFileRes.data).img_url;
-									alert(uploadFileRes.data)
-									alert(that.img)
-									that.hasRes=1
 								}
 							});
-							
-							
-						},2000)
-
-						
+						}).catch((err) => {
+							uni.hideLoading();
+							uni.showToast({
+								title: "压缩失败",
+								icon: "none"
+							})
+						})
 					}
 				})
 
 			},
 
-			// upFile(input, event) {
-			// 	var _self = this;
-			// 	uni.uploadFile({
-			// 		url:this.$BASE_URL+'Inspection/setUpload',
-			// 		files: [{
-			// 			file: input.files[0],
-			// 			uri: event.srcElement.value
-			// 		}],
-			// 		success: (uploadFileRes) => {
-			// 			var data = JSON.parse(uploadFileRes.data)
-			// 			this.img = data.img_url;
-			// 			alert(this.img)
-			// 		},
-			// 		fail: (err) => {
-			// 			console.log(err)
-			// 		}
-			// 	});
-			// },
-
+	
 			addSubmit() {
-
-
-
 				if (!this.reportName.replace(/^\s*/g, '')) {
 					uni.showToast({
 						title: "请输入上报名称",