压缩图片，限制上传文件大小，过大不能上传，更新编辑时上传图片附件为空的问题

App.vue

@@ -4,7 +4,7 @@
 			console.log('App Launch')
 			if(localStorage.getItem('token')=='null' && localStorage.getItem('errorMsg')=='null') {
 				
-				// window.location.href ='https://open.wecard.qq.com/connect/oauth/authorize?app_key=4AA7B3944BDF3739&response_type=code&scope=snsapi_userinfo&ocode=1015730314&redirect_uri=https://chtech.ncjti.edu.cn/kpi/api/sysUser/code&state=https://chtech.ncjti.edu.cn/kpi/api/sysUser/code';
+				window.location.href ='https://open.wecard.qq.com/connect/oauth/authorize?app_key=4AA7B3944BDF3739&response_type=code&scope=snsapi_userinfo&ocode=1015730314&redirect_uri=https://chtech.ncjti.edu.cn/kpi/api/sysUser/code&state=https://chtech.ncjti.edu.cn/kpi/api/sysUser/code';
 			} else if (localStorage.getItem('token')=='null' && localStorage.getItem('errorMsg')=='获取用户信息失败') {
 				// uni.navigateTo({
 				// 	url:'pages/huoquanshibai/huoquanshibai'

components/compress/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>

pages/project/addProject.vue

@@ -8,7 +8,7 @@
 			<textarea class="proINname proIMi" v-model="projectContent" placeholder="请选择项目描述"/>
 			<view class="proMiao">附件</view>
 			<view class="upload-img">
-				<uni-file-picker limit="3"
+				<uni-file-picker limit="3" :maxMb="2"
 					@select='selectUpload'
 					@delete="deleteHandle"
 					:auto-upload='false' 
@@ -20,7 +20,7 @@
 					v-model='fileList'
 				></uni-file-picker>
 			</view>
-			<span style="margin: 20rpx 0 0 20rpx;width: 700rpx;">支持pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx格式，单个文件大小不超过5MB</span>
+			<span style="margin: 20rpx 0 0 20rpx;width: 700rpx;">支持pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx格式，单个文件大小不超过2MB</span>
 			<view class="proMiao">主办单位/主办人</view>
 			<uni-data-picker placeholder="请选择主办单位" popup-title="请选择主办人" :localdata="range" v-model="value"
 				@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
@@ -115,14 +115,21 @@
 			</view>
 			<view style="width: 100%;height: 60rpx;"></view>
 		</view>
+		<!-- 图片压缩 -->
+		<Compress ref="Compress" />
 	</view>
 </template>
 
 <script>
 	import configdata from '@/common/config.js'
 	import mySelectCheckbox from '../../components/my-selectCheckbox.vue'
+	// 引入压缩组件
+	import Compress from '@/components/compress/compress.vue'
 	export default {
-		components:{mySelectCheckbox},
+		components:{
+			mySelectCheckbox,
+			Compress
+		},
 		data() {
 			return {
 				pName:'',//项目标题
@@ -465,8 +472,38 @@
 			},
 			async selectUpload(e) {
 				console.log('上传：', e)
-				 let data = new FormData();
-				  data.set("file", e.tempFiles[0].file);
+				// console.log((e.tempFiles[0].size / 1024 > 1024 * 2),'大小')
+				if(e.tempFiles.length>0){
+					for (let i = 0; i < e.tempFilePaths.length; i++) {
+					   if ((e.tempFiles[i].size / 1024 > 1024 * 2)) {
+					   	console.log('过大',e.tempFiles[i].extname)
+						if(e.tempFiles[i].extname=='jpg' || e.tempFiles[i].extname=='png'||e.tempFiles[i].extname=='jpeg'){
+							this.yaimg(e.tempFilePaths[i])
+						}else{
+							uni.showModal({
+								title: '提示',
+								content: '文件大于2M，无法上传',
+								showCancel: false, // 是否显示取消按钮，默认为 true // 是否显示取消按钮，默认为 true
+								success: function(res) {
+									if (res.confirm) {
+									}
+								}
+							});
+						}
+					   }else{
+					   	this.imgUpload(e.tempFiles[i].file);
+					   }
+					}
+				}
+			},
+			//上传图片
+			async imgUpload(result){
+				uni.showLoading({
+					title: '上传中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				let data = new FormData();
+				  data.set("file", result);
 				  let res = await this.$axios({
 				    method: "post",
 				    url: this.config('APIHOST1') + "/api/sysFile/upload",
@@ -483,6 +520,7 @@
 				    this.fileList2.push(res.data.data);
 					this.fileList22=this.fileList2.join(",")
 					// console.log(this.fileList2.join(","))
+					uni.hideLoading();
 				  } else if(res.message=="登录凭证已过去，请重新登录"){
 					sessionStorage.removeItem("token")
 					sessionStorage.removeItem("roleId")
@@ -495,14 +533,126 @@
 							}
 						}
 					});
+					uni.hideLoading();
 				   }else {
 			    		uni.showToast({
 							title: res.message,
 							icon: 'none',
 							duration:800
 						});
+						uni.hideLoading();
 				    }
 			},
+			/**
+			 * 压缩图片
+			 * @description 由组件处理,只需传入临时路径
+			 * @param {Object} url - 临时路径
+			 * @return void
+			 */
+			yaimg(url) {
+				uni.showLoading({
+					title: '压缩中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				// 组件参数也有文档，详见文章的最底部！
+				// const config = {
+				// 	src: url,//要压缩的临时路径
+				// 	maxSize: 800,//压缩后的最大尺寸
+				// 	fileType: 'png',//压缩后的文件类型，可选值 jpg、png
+				// 	quality: 0.6,//压缩后的质量(仅jpg类型有效，原因可自行阅读官方canvas文档)，可选值 0 ~ 1，值越大越清晰(图片也越大)
+				// }
+				// console.log(config)
+				// 调用压缩方法
+				this.$refs.Compress.compress({
+					src: url,//要压缩的临时路径
+					maxSize: 800,//压缩后的最大尺寸
+					fileType: '',//压缩后的文件类型，可选值 jpg、png
+					quality: 0.6,//压缩后的质量(仅jpg类型有效，原因可自行阅读官方canvas文档)，可选值 0 ~ 1，值越大越清晰(图片也越大)
+				}).then((res) => {
+					// console.log('返回的base64编码', res)
+					this.base = res
+			
+					// 时间戳 + 随机数, 防止文件名重复
+					let timestamp = new Date().getTime();
+					let sunumber = Math.floor(Math.random()*999);
+					// H5需要将base64转为file对象进行上传
+					// 第一个参数是base64编码, 第二个是文件名
+					var file = this.base64ToFile(res, timestamp + sunumber)
+					
+					// 最终压缩完毕的file对象
+					console.log('压缩后的图片(File对象)', file)
+					this.upload(file)
+					this.file = file
+					
+					uni.hideLoading();
+					//上传到服务器
+					// this.upload(file)
+				}).catch((err) => {
+					console.log('压缩失败',err)
+					uni.hideLoading();
+				})
+			},
+			/**
+			 * 压缩后上传到服务器
+			 * @description 这块需要您自行处理
+			 * @param {Object} file - 要上传的file对象
+			 * @return void
+			 */
+			async upload(file){
+				uni.showLoading({
+					title: '上传中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				let data = new FormData();
+				  data.set("file", file);
+				console.log(data)
+				  let res = await this.$axios({
+				    method: "post",
+				    url: this.config('APIHOST1') + "/api/sysFile/upload",
+				    headers: {
+						tokenW: sessionStorage.getItem("token"),
+						"Content-Type": "multipart/form-data"
+				    },
+				    data: data,
+				  });
+					// return res
+				  console.log(res, "图片上传成功",res.data.code == 200);
+				  if (res.data.success) {
+				    this.fileList2.push(res.data.data);
+					this.fileList22=this.fileList2.join(",")
+					console.log(this.fileList22)
+					uni.hideLoading();
+				  }else {
+			    		uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration:800
+						});
+						uni.hideLoading();
+				   }
+			},
+			/**
+			 * base64 → File
+			 * @description 转换函数
+			 * @param {String} base64- base64完整字符串
+			 * @param {String} name - 文件名
+			 * @return Object
+			 */
+			base64ToFile(base64, name) {
+			  if (typeof base64 != 'string') { return; }
+				var arr = base64.split(',')
+				var type = arr[0].match(/:(.*?);/)[1]
+				var fileExt = type.split('/')[1]
+				var bstr = atob(arr[1])
+				var n = bstr.length
+				var u8arr = new Uint8Array(n)
+				while (n--) {
+					u8arr[n] = bstr.charCodeAt(n)
+				}
+				return new File([u8arr], `${name}.` + fileExt, {
+					type: type
+				})
+			},
 			config: function (name) {
 				var info = null
 				if (name) {

pages/project/index.vue

@@ -82,7 +82,7 @@
 						{{item.projectName| ellipsis}}
 					</view>
 					<view class="list-kua">{{item.projectFrom}}</view>
-					<view style="margin-left: 10%;width: 200px;">
+					<view style="margin-left: 12%;width: 200px;">
 						<view style="margin-left: 25%;display: flex;margin-top: 10rpx;">
 							<view class="bu-shou yishou" v-if="item.collect==1" @click.stop="Qushoucang(item)">已收藏</view>
 							<view class="bu-shou shou" v-if="item.collect==0 &&shouxiang==1" @click.stop="shoucang(item)">收藏</view>

pages/project/renwuUpdateJin.vue

@@ -1,308 +1,458 @@
-<template>
-	<view class="content">
-		<view class="param">
-			<view class="proMiao mingchen">{{data.taskName}}</view>
-			<view class="proMiao title">评分标准</view>
-			<view class="prolittle">{{data.scoreStandard}}</view>
-			<view class="proMiao title">任务负责人</view>
-			<view class="prolittle">{{data.headerName}}</view>
-			<view class="proMiao title">评分上限</view>
-			<view class="prolittle">{{data.scoreLimit}}</view>
-			<view class="proMiao">附件</view>
-			<view class="prolittle" v-for="(item,index) in fileList3">
-				<view style="color: rgba(0, 97, 255, 1);" @click="navigateToTU(item.name)">{{item.name}}</view>
-			</view>
-			<view class="proMiao title">权重</view>
-			<view class="prolittle">{{data.weight}}</view>
-			<view class="proMiao title">提醒时间</view>
-			<view class="prolittle">{{data.remindTime}}</view>
-			<view class="proMiao title">预警时间</view>
-			<view class="prolittle">{{data.warnTime}}</view>
-			<view class="proMiao title">任务周期</view>
-			<view class="prolittle">{{data.startTime}}  -  {{data.endTime}}</view>
-			<view class="proMiao title">完成说明</view>
-			<textarea class="proINname proIMi" v-model="finishRemark" placeholder="请输入完成说明"/>
-			<view class="proMiao">上传附件</view>
-			<view class="upload-img">
-				<uni-file-picker limit="3" 
-					@select='selectUpload' 
-					@delete="deleteHandle"
-					:auto-upload='false' 
-					file-extname='pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx' 
-					file-mediatype="all" 
-					@success='uploadSuccess'	
-					@fail='uploadFail' 
-					:list-styles='listStyles' 
-					v-model='fileList'
-				></uni-file-picker>
-			</view>
-			<span style="margin: 20rpx 0 0 20rpx;width: 700rpx;">支持pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx格式，单个文件大小不超过5MB</span>
-			<!-- 操作键 -->
-			<view class="project">
-				<view class="butt quxiao" @click="quxiao">取消</view>
-				<view class="butt queren" @click="updateJindu">确定</view>
-			</view>
-			<view style="width: 100%;height: 60rpx;"></view>
-		</view>
+<template>
+	<view class="content">
+		<view class="param">
+			<view class="proMiao mingchen">{{data.taskName}}</view>
+			<view class="proMiao title">评分标准</view>
+			<view class="prolittle">{{data.scoreStandard}}</view>
+			<view class="proMiao title">任务负责人</view>
+			<view class="prolittle">{{data.headerName}}</view>
+			<view class="proMiao title">评分上限</view>
+			<view class="prolittle">{{data.scoreLimit}}</view>
+			<view class="proMiao">附件</view>
+			<view class="prolittle" v-for="(item,index) in fileList3">
+				<view style="color: rgba(0, 97, 255, 1);" @click="navigateToTU(item.name)">{{item.name}}</view>
+			</view>
+			<view class="proMiao title">权重</view>
+			<view class="prolittle">{{data.weight}}</view>
+			<view class="proMiao title">提醒时间</view>
+			<view class="prolittle">{{data.remindTime}}</view>
+			<view class="proMiao title">预警时间</view>
+			<view class="prolittle">{{data.warnTime}}</view>
+			<view class="proMiao title">任务周期</view>
+			<view class="prolittle">{{data.startTime}}  -  {{data.endTime}}</view>
+			<view class="proMiao title">完成说明</view>
+			<textarea class="proINname proIMi" v-model="finishRemark" placeholder="请输入完成说明"/>
+			<view class="proMiao">上传附件</view>
+			<view class="upload-img">
+				<uni-file-picker limit="3" :maxMb="2"
+					@select='selectUpload' 
+					@delete="deleteHandle"
+					:auto-upload='false' 
+					file-extname='pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx' 
+					file-mediatype="all" 
+					@success='uploadSuccess'	
+					@fail='uploadFail' 
+					:list-styles='listStyles' 
+					v-model='fileList'
+				></uni-file-picker>
+			</view>
+			<span style="margin: 20rpx 0 0 20rpx;width: 700rpx;">支持pdf,docx,jpg,png,jpeg,doc,docm,dot,dotm,dotx,xlsx,xls,csv,xlsm,slxb,xlt,xltx格式，单个文件大小不超过2MB</span>
+			<!-- 操作键 -->
+			<view class="project">
+				<view class="butt quxiao" @click="quxiao">取消</view>
+				<view class="butt queren" @click="updateJindu">确定</view>
+			</view>
+			<view style="width: 100%;height: 60rpx;"></view>
+		</view>
+		<!-- 图片压缩 -->
+		<Compress ref="Compress" />
 	</view>
 </template>
 
-<script>
-	import configdata from '@/common/config.js'
-	export default {
-		data() {
-			return {
-				data:{},
-				fileList3: [],
-				// 完成进度上传附件
-				fileList: [],
-				fileList2: [],
-				fileList22:'',
-				listStyles: {
-					"borderStyle": {
-						"width": "0", // 边框宽度
-					},
-					"border": false, // 是否显示边框
-					"dividline": false
-				},
-				finishRemark:'',//完成说明
-			}
-		},
-		onLoad(option) {
-			console.log(JSON.parse(decodeURIComponent(option.data)))
-			this.data=JSON.parse(decodeURIComponent(option.data))
-			var image=[]
-			image=this.data.fileUrl.split(',')
-			this.fileList3 =image.map(item =>{
-				return {
-					name: item
-				}
-			})
-		},
-		methods: {
-			//跳转页面
-			navigateToTU(url) {
-			  window.location.href = url;
-			},
-			//取消
-			quxiao(){
-				uni.navigateBack({
-					delta:1
-				})
-			},
-			//更新进度
-			updateJindu(){
-				let that = this
-				uni.showLoading({
-					title: '加载中',
-					mask: true, // 是否显示透明蒙层，防止触摸穿透
-				});
-				var data={
-					"taskId": that.data.id,  
-					"finishRemark": that.finishRemark,
-					"fileUrl":that.fileList22
-				}
-				that.$Request.postT('/api/sysTask/submitTask',data).then(res => {
-					if (res.code==200) {
-						uni.showToast({
-							title: '更新成功',
-							icon: 'none',
-							duration:800
-						});
-						uni.hideLoading()
-										
-						setTimeout(function() {
-							uni.navigateBack({
-								delta:1
-							})
-							// uni.switchTab({
-							// 	url:'/pages/project/index'
-							// })
-						}, 1000)
-					} else {
-						uni.hideLoading();
-						uni.showToast({
-							title: res.message,
-							icon: 'none',
-							duration:800
-						});
-					}
-				});
-			},
-			// 上传附件
-			uploadSuccess(e) {
-			console.log('上传成功', e)
-			},
-			uploadFail(e) {
-				console.log('上传失败：', e)
-			},
-			//删除文件
-			deleteHandle(index){
-				console.log(index)
-				this.fileList2.splice(index.index,1)
-				console.log(this.fileList2)
-				this.fileList22=this.fileList2.join(",")
-				console.log(this.fileList22)
-				// uni.showLoading({
-				// 	title: '删除中',
-				// 	mask: true, // 是否显示透明蒙层，防止触摸穿透
-				// });
-				// var data={
-				// 	"fileName": this.fileList2[index]
-				// }
-				// this.$Request.postT('/api/sysFile/delete',data).then(res => {
-				// 	if (res.code==200) {
-				// 		uni.showToast({
-				// 			title: '删除成功',
-				// 			icon: 'none',
-				// 			duration:800
-				// 		});
-				// 		uni.hideLoading()
-				// 	} else {
-				// 		uni.hideLoading();
-				// 		uni.showToast({
-				// 			title: res.message,
-				// 			icon: 'none',
-				// 			duration:800
-				// 		});
-				// 	}
-				// });
-			},
-			async selectUpload(e) {
-				console.log('上传：', e)
-				 let data = new FormData();
-				  data.set("file", e.tempFiles[0].file);
-				  let res = await this.$axios({
-				    method: "post",
-				    url: this.config('APIHOST1') + "/api/sysFile/upload",
-				    headers: {
-						tokenW: sessionStorage.getItem("token"),
-						// tokenP: sessionStorage.getItem("token"),
-						"Content-Type": "multipart/form-data"
-				    },
-				    data: data,
-				  });
-					// return res
-				  console.log(res, "图片上传成功");
-				  if (res.data.code == 200) {
-					console.log(this.fileList)
-				    this.fileList2.push(res.data.data);
-					this.fileList22=this.fileList2.join(",")
-					console.log(this.fileList2.join(","))
-				  } else if(res.message=="登录凭证已过去，请重新登录"){
-					sessionStorage.removeItem("token")
					sessionStorage.removeItem("roleId")
-					uni.showModal({
-						title: '提示',
-						content: '用户信息失效，请重新登录！',
-						showCancel: false, // 是否显示取消按钮，默认为 true // 是否显示取消按钮，默认为 true
-						success: function(res) {
-							if (res.confirm) {
-							}
-						}
-					});
-				   }else {
-			    		uni.showToast({
-							title: res.message,
-							icon: 'none',
-							duration:800
-						});
-				    }
-			},
-			config: function (name) {
-				var info = null
-				if (name) {
-					var name2 = name.split('.') //字符分割
-					if (name2.length > 1) {
-						info = configdata[name2[0]][name2[1]] || null
-					} else {
-						info = configdata[name] || null
-					}
-					if (info == null) {
-						let web_config = cache.get('web_config')
-						if (web_config) {
-							if (name2.length > 1) {
-								info = web_config[name2[0]][name2[1]] || null
-							} else {
-								info = web_config[name] || null
-							}
-						}
-					}
-				}
-				return info
-			},
-		}
+<script>
+	import configdata from '@/common/config.js'
+	// 引入压缩组件
+	import Compress from '@/components/compress/compress.vue'
+	export default {
+		components:{
+			Compress
+		},
+		data() {
+			return {
+				data:{},
+				fileList3: [],
+				// 完成进度上传附件
+				fileList: [],
+				fileList2: [],
+				fileList22:'',
+				listStyles: {
+					"borderStyle": {
+						"width": "0", // 边框宽度
+					},
+					"border": false, // 是否显示边框
+					"dividline": false
+				},
+				finishRemark:'',//完成说明
+			}
+		},
+		onLoad(option) {
+			console.log(JSON.parse(decodeURIComponent(option.data)))
+			this.data=JSON.parse(decodeURIComponent(option.data))
+			var image=[]
+			image=this.data.fileUrl.split(',')
+			this.fileList3 =image.map(item =>{
+				return {
+					name: item
+				}
+			})
+		},
+		methods: {
+			//跳转页面
+			navigateToTU(url) {
+			  window.location.href = url;
+			},
+			//取消
+			quxiao(){
+				uni.navigateBack({
+					delta:1
+				})
+			},
+			//更新进度
+			updateJindu(){
+				let that = this
+				uni.showLoading({
+					title: '加载中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				var data={
+					"taskId": that.data.id,  
+					"finishRemark": that.finishRemark,
+					"fileUrl":that.fileList22
+				}
+				that.$Request.postT('/api/sysTask/submitTask',data).then(res => {
+					if (res.code==200) {
+						uni.showToast({
+							title: '更新成功',
+							icon: 'none',
+							duration:800
+						});
+						uni.hideLoading()
+										
+						setTimeout(function() {
+							uni.navigateBack({
+								delta:1
+							})
+							// uni.switchTab({
+							// 	url:'/pages/project/index'
+							// })
+						}, 1000)
+					} else {
+						uni.hideLoading();
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration:800
+						});
+					}
+				});
+			},
+			// 上传附件
+			uploadSuccess(e) {
+			console.log('上传成功', e)
+			},
+			uploadFail(e) {
+				console.log('上传失败：', e)
+			},
+			//删除文件
+			deleteHandle(index){
+				console.log(index)
+				this.fileList2.splice(index.index,1)
+				console.log(this.fileList2)
+				this.fileList22=this.fileList2.join(",")
+				console.log(this.fileList22)
+				// uni.showLoading({
+				// 	title: '删除中',
+				// 	mask: true, // 是否显示透明蒙层，防止触摸穿透
+				// });
+				// var data={
+				// 	"fileName": this.fileList2[index]
+				// }
+				// this.$Request.postT('/api/sysFile/delete',data).then(res => {
+				// 	if (res.code==200) {
+				// 		uni.showToast({
+				// 			title: '删除成功',
+				// 			icon: 'none',
+				// 			duration:800
+				// 		});
+				// 		uni.hideLoading()
+				// 	} else {
+				// 		uni.hideLoading();
+				// 		uni.showToast({
+				// 			title: res.message,
+				// 			icon: 'none',
+				// 			duration:800
+				// 		});
+				// 	}
+				// });
+			},
+			async selectUpload(e) {
+				console.log('上传：', e)
+				// console.log((e.tempFiles[0].size / 1024 > 1024 * 2),'大小')
+				if(e.tempFiles.length>0){
+					for (let i = 0; i < e.tempFilePaths.length; i++) {
+					   if ((e.tempFiles[i].size / 1024 > 1024 * 2)) {
+					   	console.log('过大',e.tempFiles[i].extname)
+						if(e.tempFiles[i].extname=='jpg' || e.tempFiles[i].extname=='png'||e.tempFiles[i].extname=='jpeg'){
+							this.yaimg(e.tempFilePaths[i])
+						}else{
+							uni.showModal({
+								title: '提示',
+								content: '文件大于2M，无法上传',
+								showCancel: false, // 是否显示取消按钮，默认为 true // 是否显示取消按钮，默认为 true
+								success: function(res) {
+									if (res.confirm) {
+									}
+								}
+							});
+						}
+					   }else{
+					   	this.imgUpload(e.tempFiles[i].file);
+					   }
+					}
+				}
+			},
+			//上传图片
+			async imgUpload(result){
+				uni.showLoading({
+					title: '上传中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				let data = new FormData();
+				  data.set("file", result);
+				  let res = await this.$axios({
+				    method: "post",
+				    url: this.config('APIHOST1') + "/api/sysFile/upload",
+				    headers: {
+						tokenW: sessionStorage.getItem("token"),
+						"Content-Type": "multipart/form-data"
+				    },
+				    data: data,
+				  });
+					// return res
+				  console.log(res, "图片上传成功");
+				  if (res.data.code == 200) {
+					console.log(this.fileList)
+				    this.fileList2.push(res.data.data);
+					this.fileList22=this.fileList2.join(",")
+					// console.log(this.fileList2.join(","))
+					uni.hideLoading();
+				  } else if(res.message=="登录凭证已过去，请重新登录"){
+					sessionStorage.removeItem("token")
+					sessionStorage.removeItem("roleId")
+					uni.showModal({
+						title: '提示',
+						content: '用户信息失效，请重新登录！',
+						showCancel: false, // 是否显示取消按钮，默认为 true // 是否显示取消按钮，默认为 true
+						success: function(res) {
+							if (res.confirm) {
+							}
+						}
+					});
+					uni.hideLoading();
+				   }else {
+			    		uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration:800
+						});
+						uni.hideLoading();
+				    }
+			},
+			/**
+			 * 压缩图片
+			 * @description 由组件处理,只需传入临时路径
+			 * @param {Object} url - 临时路径
+			 * @return void
+			 */
+			yaimg(url) {
+				uni.showLoading({
+					title: '压缩中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				// 组件参数也有文档，详见文章的最底部！
+				// const config = {
+				// 	src: url,//要压缩的临时路径
+				// 	maxSize: 800,//压缩后的最大尺寸
+				// 	fileType: 'png',//压缩后的文件类型，可选值 jpg、png
+				// 	quality: 0.6,//压缩后的质量(仅jpg类型有效，原因可自行阅读官方canvas文档)，可选值 0 ~ 1，值越大越清晰(图片也越大)
+				// }
+				// console.log(config)
+				// 调用压缩方法
+				this.$refs.Compress.compress({
+					src: url,//要压缩的临时路径
+					maxSize: 800,//压缩后的最大尺寸
+					fileType: '',//压缩后的文件类型，可选值 jpg、png
+					quality: 0.6,//压缩后的质量(仅jpg类型有效，原因可自行阅读官方canvas文档)，可选值 0 ~ 1，值越大越清晰(图片也越大)
+				}).then((res) => {
+					// console.log('返回的base64编码', res)
+					this.base = res
+			
+					// 时间戳 + 随机数, 防止文件名重复
+					let timestamp = new Date().getTime();
+					let sunumber = Math.floor(Math.random()*999);
+					// H5需要将base64转为file对象进行上传
+					// 第一个参数是base64编码, 第二个是文件名
+					var file = this.base64ToFile(res, timestamp + sunumber)
+					
+					// 最终压缩完毕的file对象
+					console.log('压缩后的图片(File对象)', file)
+					this.upload(file)
+					this.file = file
+					
+					uni.hideLoading();
+					//上传到服务器
+					// this.upload(file)
+				}).catch((err) => {
+					console.log('压缩失败',err)
+					uni.hideLoading();
+				})
+			},
+			/**
+			 * 压缩后上传到服务器
+			 * @description 这块需要您自行处理
+			 * @param {Object} file - 要上传的file对象
+			 * @return void
+			 */
+			async upload(file){
+				uni.showLoading({
+					title: '上传中',
+					mask: true, // 是否显示透明蒙层，防止触摸穿透
+				});
+				let data = new FormData();
+				  data.set("file", file);
+				console.log(data)
+				  let res = await this.$axios({
+				    method: "post",
+				    url: this.config('APIHOST1') + "/api/sysFile/upload",
+				    headers: {
+						tokenW: sessionStorage.getItem("token"),
+						"Content-Type": "multipart/form-data"
+				    },
+				    data: data,
+				  });
+					// return res
+				  console.log(res, "图片上传成功",res.data.code == 200);
+				  if (res.data.code == 200) {
+				    this.fileList2.push(res.data.data);
+					this.fileList22=this.fileList2.join(",")
+					console.log(this.fileList22)
+					uni.hideLoading();
+				  }else {
+			    		uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration:800
+						});
+						uni.hideLoading();
+				   }
+			},
+			/**
+			 * base64 → File
+			 * @description 转换函数
+			 * @param {String} base64- base64完整字符串
+			 * @param {String} name - 文件名
+			 * @return Object
+			 */
+			base64ToFile(base64, name) {
+			  if (typeof base64 != 'string') { return; }
+				var arr = base64.split(',')
+				var type = arr[0].match(/:(.*?);/)[1]
+				var fileExt = type.split('/')[1]
+				var bstr = atob(arr[1])
+				var n = bstr.length
+				var u8arr = new Uint8Array(n)
+				while (n--) {
+					u8arr[n] = bstr.charCodeAt(n)
+				}
+				return new File([u8arr], `${name}.` + fileExt, {
+					type: type
+				})
+			},
+			config: function (name) {
+				var info = null
+				if (name) {
+					var name2 = name.split('.') //字符分割
+					if (name2.length > 1) {
+						info = configdata[name2[0]][name2[1]] || null
+					} else {
+						info = configdata[name] || null
+					}
+					if (info == null) {
+						let web_config = cache.get('web_config')
+						if (web_config) {
+							if (name2.length > 1) {
+								info = web_config[name2[0]][name2[1]] || null
+							} else {
+								info = web_config[name] || null
+							}
+						}
+					}
+				}
+				return info
+			},
+		}
 	}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-	.param{
-		margin: 20rpx 0 0 0;
-		width: 100%;
-		background-color: rgba(255, 255, 255, 1);
-		font-size: 28rpx;
-		font-weight: 400;
-		line-height: 41rpx;
-		color: rgba(0, 0, 0, 1);
-	}
-	.proMiao{
-		margin: 31rpx 0 0 20rpx;
-		width: 710rpx;
-	}
-	.prolittle{
-		margin: 5rpx 0 0 20rpx;
-		width: 710rpx;
-		word-wrap: break-word;
-		word-break: break-all;
-		white-space: pre-line;
-	}
-	.proINname{
-		margin: 25rpx 0 0 21rpx;
-		width: 709rpx;
-		height: 90rpx;
-		border-radius: 13rpx;
-		background: rgba(245, 248, 252, 1);
-		border: 1rpx solid rgba(229, 229, 229, 1);
-		font-size: 28rpx;
-		line-height: 90rpx;
-		/* color: rgba(179, 179, 179, 1); */
-	}
-	.proIMi{
-		height: 315rpx;
-	}
-	.mingchen{
-		font-size: 32rpx;
-		font-weight: 500;
-		line-height: 46rpx;
-	}
-	.title{
-		color: rgba(102, 102, 102, 1);
-	}
-	/* 操作键 */
-	.project{
-		display: flex;
-		margin: 61rpx 0 0 0;
-		justify-content: space-evenly;
-	}
-	.butt{
-		width: 330rpx;
-		height: 90rpx;
-		border-radius: 117rpx;
-		font-size: 32rpx;
-		line-height: 90rpx;
-		text-align: center;
-	}
-	.quxiao{
-		border: 1rpx solid rgba(0, 97, 255, 1);
-		color: rgba(0, 97, 255, 1);
-	}
-	.queren{
-		background: rgba(0, 97, 255, 1);
-		color: rgba(255, 255, 255, 1);
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.param{
+		margin: 20rpx 0 0 0;
+		width: 100%;
+		background-color: rgba(255, 255, 255, 1);
+		font-size: 28rpx;
+		font-weight: 400;
+		line-height: 41rpx;
+		color: rgba(0, 0, 0, 1);
+	}
+	.proMiao{
+		margin: 31rpx 0 0 20rpx;
+		width: 710rpx;
+	}
+	.prolittle{
+		margin: 5rpx 0 0 20rpx;
+		width: 710rpx;
+		word-wrap: break-word;
+		word-break: break-all;
+		white-space: pre-line;
+	}
+	.proINname{
+		margin: 25rpx 0 0 21rpx;
+		width: 709rpx;
+		height: 90rpx;
+		border-radius: 13rpx;
+		background: rgba(245, 248, 252, 1);
+		border: 1rpx solid rgba(229, 229, 229, 1);
+		font-size: 28rpx;
+		line-height: 90rpx;
+		/* color: rgba(179, 179, 179, 1); */
+	}
+	.proIMi{
+		height: 315rpx;
+	}
+	.mingchen{
+		font-size: 32rpx;
+		font-weight: 500;
+		line-height: 46rpx;
+	}
+	.title{
+		color: rgba(102, 102, 102, 1);
+	}
+	/* 操作键 */
+	.project{
+		display: flex;
+		margin: 61rpx 0 0 0;
+		justify-content: space-evenly;
+	}
+	.butt{
+		width: 330rpx;
+		height: 90rpx;
+		border-radius: 117rpx;
+		font-size: 32rpx;
+		line-height: 90rpx;
+		text-align: center;
+	}
+	.quxiao{
+		border: 1rpx solid rgba(0, 97, 255, 1);
+		color: rgba(0, 97, 255, 1);
+	}
+	.queren{
+		background: rgba(0, 97, 255, 1);
+		color: rgba(255, 255, 255, 1);
 	}
 </style>

uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue

@@ -93,6 +93,10 @@
 		},
 		emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
 		props: {
+			maxMb:{
+				type:Number,
+				default:1
+			},
 			modelValue: {
 				type: [Array, Object],
 				default () {
@@ -218,8 +222,28 @@
 		computed: {
 			filesList() {
 				let files = []
-				this.files.forEach(v => {
+				// this.files.forEach(v => {
+				// 	files.push(v)
+				// })
+				console.log(this.files)
+				this.files.forEach((v,index) => {
 					files.push(v)
+					if(v.extname){
+						if(v.extname=='jpg' || v.extname=='png'||v.extname=='jpeg'){
+							// files.push(v)
+							// this.files.push(v)
+						}else{
+							if(v.size/ 1024 <= 1024 * 2){
+								// files.push(v)
+								// this.files.push(v)
+							}else{
+								console.log(v)
+								this.files.splice(index,1)
+								files.splice(index,1)
+							}
+						}
+					}
+					
 				})
 				return files
 			},
@@ -329,6 +353,7 @@
 			 * 选择文件
 			 */
 			choose() {
+				console.log(this.files)
 				if (this.disabled) return
 				if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType ===
 					'array') {
@@ -338,6 +363,7 @@
 					})
 					return
 				}
+				console.log(this.files,)
 				this.chooseFiles()
 			},
 
@@ -422,6 +448,25 @@
 					const fileName = fileNameSplit.join('.').replace(/[\s\/\?<>\\:\*\|":]/g, '_')
 					fileItem.cloudPath = fileName + '_' + Date.now() + '_' + index + '.' + ext
 				})
+				for (var i = 0; i < files.length; i++) {
+					let s = files[i].size / (1024 * 1024)
+					let ttname=files[i].name.split('.')
+					if (s > this.maxMb) {
+						if(ttname[1]=='jpg' || ttname[1]=='png'||ttname[1]=='jpeg'){
+							
+						}else{
+							uni.showToast({
+								title: '大于'+this.maxMb+'MB,以去除相关文件',
+								icon: "none"
+							});
+							files.splice(i)
+						}
+						
+						// res.tempFiles.splice(i)
+						// 
+					}
+				}
+				console.log(files,)
 			},
 
 			/**

uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue

@@ -79,10 +79,26 @@
 			list() {
 				let files = []
 				console.log(this.filesList)
-				this.filesList.forEach(v => {
+				this.filesList.forEach((v,index) => {
 					files.push(v)
+					if(v.extname){
+						if(v.extname=='jpg' || v.extname=='png'||v.extname=='jpeg'){
+							// files.push(v)
+							// this.filesList.push(v)
+						}else{
+							if(v.size/ 1024 <= 1024 * 2){
+								// files.push(v)
+								// this.filesList.push(v)
+							}else{
+								this.filesList.splice(index,1)
+								files.splice(index,1)
+							}
+						}
+					}
 				})
+				console.log(files)
 				return files
+				console.log(files)
 			},
 			styles() {
 				let styles = {