瀏覽代碼

完善图片压缩

LuChongMei 11 月之前
父節點
當前提交
87adfcc902

+ 1 - 1
jp-mobile/config.js

@@ -5,7 +5,7 @@ if(process.env.NODE_ENV === 'development'){
     APP_SERVER_URL = '/api'
 }else{
     // 生产环境
-    APP_SERVER_URL = 'https://miniapp.huidutech.com.cn/gw/'
+    APP_SERVER_URL = 'https://miniapp.huidutech.com.cn/gwapi/'
 }
 
 // APP_SERVER_URL = APP_SERVER_URL + '/app'

+ 88 - 31
jp-mobile/pages/fileTransmit/addFileTransmit.vue

@@ -39,9 +39,12 @@
 						height="150" accept="file" :previewImage="false">
 						<view class="addfile flex"> <u-icon size="20" bold name="plus"></u-icon></view>
 					</u-upload>
-					<u-upload :fileList="fileLists" @afterRead="afterRead" multiple :maxCount="9" width="80" height="80"
+					<view class="takephoto addfile flex" @click="takePhoto"> <u-icon size="20" bold
+							name="camera"></u-icon>
+					</view>
+					<!-- <u-upload :fileList="fileLists" @afterRead="afterRead"  width="80" height="80"
 						accept="image" capture="camera" :previewImage="false">
-					</u-upload>
+					</u-upload> -->
 				</u-form-item>
 				<view class="text-danger" style="font-size: 12px!important;">请确保上传图片内容清晰可见,所有涉密敏感信息不得上传</view>
 				<view class="other_info">
@@ -162,14 +165,17 @@
 			},
 			// 删除图片
 			deletePic(event) {
-				this[`imgList${event.name}`].splice(event.index, 1)
-				this[`fileLists${event.name}`].splice(event.index, 1)
+				this.imgList = this.imgList.filter(item => item.name != event.file.name)
+				this.fileLists = this.fileLists.filter(item => item.name != event.file.name)
 			},
 			// 图片压缩
-			compressH5(urlData, targetSizeKB, initialQuality = 1.0) {
+			async compressH5(urlData, targetSizeKB, initialQuality = 1.0) {
 				const maxQuality = 1.0;
 				const minQuality = 0.0;
 				const tolerance = 0.01; // 根据需要调整公差
+				if (!urlData.url) {
+					this.$set(urlData, "url", urlData.path)
+				}
 				let that = this
 				return new Promise((resolve, reject) => {
 					let binarySearch = (min, max) => {
@@ -177,6 +183,7 @@
 						uni.getImageInfo({
 							src: urlData.url,
 							success(res) {
+								const reader = new FileReader();
 								let img = new Image()
 								img.src = res.path
 								img.onload = function() {
@@ -187,23 +194,32 @@
 									canvas.height = img.height;
 
 									ctx.clearRect(0, 0, canvas.width, canvas.height);
-									ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+									ctx.drawImage(img, 0, 0, canvas.width, canvas
+										.height);
 
 									// 使用异步的 toBlob 方法
 									canvas.toBlob(async (blob) => {
-										const fileSizeKB = blob.size / 1024;
-										if (Math.abs(fileSizeKB - targetSizeKB) <
-											tolerance || max - min < tolerance) {
+										const fileSizeKB = blob.size /
+											1024;
+										if (Math.abs(fileSizeKB -
+												targetSizeKB) <
+											tolerance || max - min <
+											tolerance) {
 											// 当前质量足够接近目标大小,使用当前质量解析
-											const dataUrl = canvas.toDataURL(urlData.type, midQuality);
-											let result = that
-												.uploadFilePromise(dataUrl)
-											setTimeout(() => {
-												resolve(
-													result)
-											}, 1000)
-
-										} else if (fileSizeKB > targetSizeKB) {
+											reader.readAsDataURL(blob);
+											uni.showToast({
+												title: blob.size
+											})
+											reader.onload = () => {
+												let result = that
+													.uploadFilePromise(reader
+														.result)
+												setTimeout(() => {
+													resolve(result)
+												}, 300)
+											}
+										} else if (fileSizeKB >
+											targetSizeKB) {
 											// 如果文件大小太大,降低质量,继续二分查找
 											binarySearch(min, midQuality);
 										} else {
@@ -212,13 +228,6 @@
 										}
 									}, urlData.type, midQuality);
 								};
-							},
-							fail() {
-								uni.showModal({
-									title: '提示',
-									content: '图片压缩失败',
-									showCancel: false
-								});
 							}
 						})
 					}
@@ -226,11 +235,49 @@
 					binarySearch(minQuality, maxQuality);
 				})
 			},
+			// 拍照
+			takePhoto() {
+				let that = this
+				// 调用uniapp的chooseImage API 选择图片
+				uni.chooseImage({
+					count: 1, // 默认9, 设置图片的数量
+					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
+					sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
+					success: (chooseImageRes) => {
+						uni.showLoading({
+							title: "上传中"
+						})
+
+						const tempFilePaths = chooseImageRes.tempFiles[0];
+						// 成功选择图片后进行压缩处理
+							that.compressH5(tempFilePaths, 150).then(result =>{
+								const fileName = result.split(/[/\\=]/).pop();
+								let item1 = {
+									name: fileName,
+									url: BASE_URL + result
+								}
+								let item = {
+									name: fileName,
+									url: result
+								}
+								that.fileLists.push(item)
+								that.imgList.push(item1)
+								uni.hideLoading()
+							})
+						
+					},
+					fail: (error) => {
+						console.log('Error while choosing image:', error);
+						uni.hideLoading()
+					}
+				});
+			},
 			// 新增图片
 			async afterRead(event) {
 				uni.showLoading({
 					title: "上传中"
 				})
+
 				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
 				let lists = [].concat(event.file)
 				let fileListLen = this.fileLists.length
@@ -243,14 +290,16 @@
 				})
 				for (let i = 0; i < lists.length; i++) {
 					let result = ""
+
 					if (isImageFormat(lists[i].name)) {
 						if (lists[i].size > (200 * 1024)) {
-							
 							result = await this.compressH5(lists[i], 150);
 						} else {
 							result = await this.uploadFilePromise(lists[i].url)
 						}
+						const fileName = result.split(/[/\\=]/).pop();
 						let item1 = {
+							name: fileName,
 							url: BASE_URL + result
 						}
 						this.imgList.push(item1)
@@ -265,17 +314,19 @@
 						this.fileList.push(a)
 					}
 					let item = this.fileLists[fileListLen]
+					item.name = result.split(/[/\\=]/).pop();
 					this.fileLists.splice(fileListLen, 1, Object.assign(item, {
 						status: 'success',
 						message: '',
 						url: result
 					}))
+
 					fileListLen++
 				}
 				uni.hideLoading()
 			},
 			async uploadFilePromise(param) {
-				
+
 				return new Promise((resolve, reject) => {
 
 					let a = uni.uploadFile({
@@ -288,7 +339,7 @@
 						success: (res) => {
 							setTimeout(() => {
 								resolve(res.data)
-							}, 1000)
+							}, 300)
 						}
 					})
 				});
@@ -302,7 +353,7 @@
 			// 表单提交
 			formSubmit() {
 				this.loading = true
-				let auditForm =  Object.assign({}, this.inputForm);
+				let auditForm = Object.assign({}, this.inputForm);
 				let files = []
 				this.fileLists.forEach(item => {
 					files.push(item.url)
@@ -356,9 +407,11 @@
 	.main_info {
 		margin-top: 15px;
 	}
-	.u-form-item__body__right__message span{
-		font-size: 12px!important;
+
+	.u-form-item__body__right__message span {
+		font-size: 12px !important;
 	}
+
 	.submit_btn {
 		background-color: #fefefe;
 		margin-top: 20px;
@@ -382,6 +435,10 @@
 		margin: 10px;
 	}
 
+	.takephoto {
+		padding-left: 9%;
+	}
+
 	.other_info {
 		width: 100%;
 	}

+ 3 - 3
jp-mobile/pages/fileTransmit/fileInfo.vue

@@ -6,7 +6,7 @@
 				<u-steps-item title="发起" :desc="inputForm.createTruename +' - '+inputForm.createTime">
 				</u-steps-item>
 				<u-steps-item v-for="item in downList" :title="item.which=='0'?'办公室拟办':item.which=='1'?'领导审批':item.which=='2'?'承办情况':item.which=='3'?'承办转发':'已归档'"
-					:desc="item.state==1?item.nextTruename :item.nextTruename +' - '+item.createTime">
+					:desc="item.state==1?item.nextTruename :item.nextTruename +' - '+item.updateTime">
 				</u-steps-item>
 				<u-steps-item v-for="item in gwList" :title="item.which=='0'?'办公室拟办':item.which=='1'?'领导审批':item.which=='2'?'承办情况':item.which=='3'?'承办转发':'待归档'"
 					:desc="item.state==1?item.nextTruename :item.nextTruename +' - '+item.createTime">
@@ -73,8 +73,8 @@
 					// 	this.undertakeInfo.push(item)
 					// }
 				})
-				this.downList.sort((a, b) => a.createTime.localeCompare(b.createTime) || a.createTime
-					.localeCompare(b.createTime));
+				this.downList.sort((a, b) => a.updateTime.localeCompare(b.updateTime) || a.updateTime
+					.localeCompare(b.updateTime));
 				this.current = this.downList.length + 1
 			})
 		}

+ 1 - 1
jp-mobile/pages/login/login.vue

@@ -31,7 +31,7 @@
 			</view> -->
 			<view class="but">
 				<u-button type="primary" shape="circle" color="linear-gradient(90deg, #1989FA, #19C2FA)"
-					@click="bindLogin" text="欢迎登录"></u-button>
+					@click="bindLogin" text="登录"></u-button>
 			</view>
 			<!-- <view class="fot">
 				<text @tap="reg_ok">免费注册</text>

+ 1 - 1
jp-mobile/pages/workbench/workbench.vue

@@ -242,7 +242,7 @@
 
 	.circle-button-box {
 		width: 25%;
-		margin-top: 10px;
+		margin-top: 30px;
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;