修改图片上传

components/upload.vue

@@ -1,68 +1,40 @@
 <template>
 	<view class="u-upload" v-if="!disabled">
-		<div v-if="!custom">
-			<view v-if="showUploadList" class="u-list-item u-preview-wrap" v-for="(item, index) in lists" :key="index"
-				:style="{
-					width: width + 'rpx',
-					height: width + 'rpx'
+		<view v-if="showUploadList" class="u-list-item u-preview-wrap" :class="{'customPreviewStyle':custom}"
+			v-for="(item, index) in lists" :key="index" :style="{
+				width: width + 'rpx',
+				height: width + 'rpx'
+			}">
+			<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
+					background: delBgColor
 				}">
-				<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
-						background: delBgColor
-					}">
-					<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
-				</view>
-				<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false"
-					height="16" class="u-progress" :percent="item.progress"></u-line-progress>
-				<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
-				<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image"
-					v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image>
+				<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
 			</view>
-		</div>
+			<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false" height="16"
+				class="u-progress" :percent="item.progress"></u-line-progress>
+			<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
+			<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage"
+				:src="item.url || item.path" :mode="imageMode"></image>
+		</view>
 		<slot name="file" :file="lists"></slot>
-		<view class="" v-if="!custom">
-			<view style="display: inline-block;" @tap="selectFile" v-if="maxCount > lists.length">
-				<slot name="addBtn"></slot>
-				<view v-if="!customBtn" class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover"
-					hover-stay-time="150" :style="{
-						width: width + 'rpx',
-						height: width + 'rpx'
-					}">
-					<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
-					<view class="u-add-tips">{{ uploadText }}</view>
-				</view>
+		<view style="display: inline-block;" :class="{'customStyle':custom}" @tap="selectFile"
+			v-if="maxCount > lists.length">
+			<slot name="addBtn"></slot>
+			<img v-if="custom" :src="options.bgc" alt="" class="imgstyle">
+			<view class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150" :style="{
+					width: width + 'rpx',
+					height: width + 'rpx'
+				}">
+				<u-icon v-if="custom" name="camera-fill" class="" size="100" color="#617E8B"></u-icon>
+				<u-icon v-if="!custom" name="plus" class="u-add-btn" size="40"></u-icon>
+				<view v-if="!custom" class="u-add-tips">{{ uploadText }}</view>
+				<view v-if="custom" class="u-add-tips">{{ options.text }}</view>
 			</view>
 		</view>
-		<!-- 自定义背景 -->
-		<view class="custom-style" v-if="custom"
-			:style="{backgroundImage: 'url(' + options.bgc + ')', backgroundSize:'100% 100%'}">
+		<!-- <view class="custom-style" v-if="custom"
+					:style="{backgroundImage: 'url(' + options.bgc + ')', backgroundSize:'100% 100%'}">
 
-			<!-- 自定义预览 -->
-			<view v-if="custom&&isSelectFile" class="u-preview">
-				<view v-if="showUploadList" class="u-list-item u-preview-wrap u-list-item-custom"
-					v-for="(item, index) in lists" :key="index" :style="{
-						width: width + 'rpx',
-						height: width + 'rpx'
-					}">
-					<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)" :style="{
-							background: delBgColor
-						}">
-						<u-icon class="u-icon" :name="delIcon" size="20" :color="delColor"></u-icon>
-					</view>
-					<u-line-progress v-if="showProgress && item.progress > 0 && !item.error" :show-percent="false"
-						height="16" class="u-progress" :percent="item.progress"></u-line-progress>
-					<view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
-					<image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image"
-						v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image>
-				</view>
-			</view>
-			<view @tap="selectFile" v-if="maxCount > lists.length">
-				<slot name="addBtn"></slot>
-				<view v-if="!customBtn" class="content">
-					<img :src="options.imgSrc" alt="" class="custom-img">
-					<view class="text">{{ options.text }}</view>
-				</view>
-			</view>
-		</view>
+		</view> -->
 	</view>
 </template>
 
@@ -424,7 +396,7 @@
 					result => {
 						// 上传成功
 						this.lists[index].response = result;
-						this.lists[index].progress = 0;
+						this.lists[index].progress = 100;
 						this.lists[index].error = false;
 						let data = result
 						this.$emit('on-success', data, index, this.lists);
@@ -434,42 +406,43 @@
 						this.$emit('on-change', data, index, this.lists);
 					}
 				)
-				// // 创建上传对象
-				// const task = uni.uploadFile({
-				// 	url: this.action,
-				// 	filePath: this.lists[index].url,
-				// 	name: this.name,
-				// 	formData: this.formData,
-				// 	header: this.header,
-				// 	success: res => {
-				// 		// 判断是否json字符串，将其转为json格式
-				// 		let data = this.toJson && this.checkIsJSON(res.data) ? JSON.parse(res.data) : res.data;
-				// 		if (![200, 201].includes(res.statusCode)) {
-				// 			this.uploadError(index, data);
-				// 		} else {
-				// 			// 上传成功
-				// 			this.lists[index].response = data;
-				// 			this.lists[index].progress = 0;
-				// 			this.lists[index].error = false;
-				// 			this.$emit('on-success', data, index, this.lists);
-				// 		}
-				// 	},
-				// 	fail: e => {
-				// 		this.uploadError(index, e);
-				// 	},
-				// 	complete: res => {
-				// 		uni.hideLoading();
-				// 		this.uploading = false;
-				// 		this.uploadFile(index + 1);
-				// 		this.$emit('on-change', res, index, this.lists);
-				// 	}
-				// });
-				// task.onProgressUpdate(res => {
-				// 	if (res.progress > 0) {
-				// 		this.lists[index].progress = res.progress;
-				// 		this.$emit('on-progress', res, index, this.lists);
-				// 	}
-				// });
+				// 创建上传对象
+				const task = uni.uploadFile({
+					url: this.action,
+					filePath: this.lists[index].url,
+					name: this.name,
+					formData: this.formData,
+					header: this.header,
+					success: res => {
+						// 判断是否json字符串，将其转为json格式
+						let data = this.toJson && this.checkIsJSON(res.data) ? JSON.parse(res.data) : res
+							.data;
+						if (![200, 201].includes(res.statusCode)) {
+							this.uploadError(index, data);
+						} else {
+							// 上传成功
+							this.lists[index].response = data;
+							this.lists[index].progress = 100;
+							this.lists[index].error = false;
+							this.$emit('on-success', data, index, this.lists);
+						}
+					},
+					fail: e => {
+						this.uploadError(index, e);
+					},
+					complete: res => {
+						uni.hideLoading();
+						this.uploading = false;
+						this.uploadFile(index + 1);
+						this.$emit('on-change', res, index, this.lists);
+					}
+				});
+				task.onProgressUpdate(res => {
+					if (res.progress > 0) {
+						this.lists[index].progress = res.progress;
+						this.$emit('on-progress', res, index, this.lists);
+					}
+				});
 			},
 			// 上传失败
 			uploadError(index, err) {
@@ -650,43 +623,79 @@
 		line-height: 1;
 	}
 
-	.custom-style {
-		// background: red;
-		width: 100%;
-		height: 480rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+	// .custom-style {
+	// 	background: #F5F6FA;
+	// 	width: 100%;
+	// 	height: 480rpx;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	align-items: center;
+	// 	background: #F2F5FA;
+	// 	border-radius: 20rpx;
+	// 	border: 2px dashed #C6CBCE;
+	// }
 
-	.custom-img {
-		width: 120rpx;
-		height: 100rpx;
-	}
+	// .custom-img {
+	// 	width: 120rpx;
+	// 	height: 100rpx;
+	// }
 
-	.text {
-		font-size: 18px;
-		font-weight: 600;
-		color: #617E8B;
-	}
+	// .text {
+	// 	font-size: 18px;
+	// 	font-weight: 600;
+	// 	color: #617E8B;
+	// }
 
-	.content {
-		display: flex;
+	// .content {
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	flex-direction: column;
+	// 	align-items: center;
+	// }
+
+	// .u-preview {
+	// 	width: 100%;
+	// 	height: 100%;
+	// 	// position: absolute;
+	// 	background: #F5F6FA;
+	// }
+
+	// .u-list-item-custom {
+	// 	margin: 0 !important;
+	// 	width: 100% !important;
+	// 	height: 100% !important;
+	// }
+	.customStyle {
+		width: 100% !important;
+		height: 440rpx !important;
+		// background: #F5F6FA;
+		// border-radius: 20rpx;
+		// border: 2px dashed #C6CBCE;
+		display: flex !important;
 		justify-content: center;
-		flex-direction: column;
 		align-items: center;
-	}
+		position: relative;
 
-	.u-preview {
-		width: 100%;
-		height: 100%;
-		// position: absolute;
-		background: red;
+		.u-add-wrap {
+			width: 100% !important;
+			height: 100% !important;
+			background: transparent;
+		}
+
+		.u-add-tips {
+			font-size: 18px;
+			font-weight: 600;
+			color: #617E8B;
+		}
 	}
 
-	.u-list-item-custom {
-		margin: 0 !important;
+	.customPreviewStyle {
 		width: 100% !important;
-		height: 100% !important;
+		height: 440rpx !important;
+	}
+	.imgstyle{
+		width: 100% !important;
+		height: 440rpx !important;
+		position: absolute;
 	}
 </style>

pageD/identity/companyIdentity.vue

@@ -20,6 +20,7 @@
 					:before-upload="filterFileType"
 					:options="uploadOptions"
 					:custom="uploadCustom"
+					@on-progress="onProgress"
 				></upload>
 				
 				<view style="margin: 0 auto;height: 240px;" v-if="license1 != ''" @click="license">
@@ -88,15 +89,14 @@
 		data() {
 			return {
 				action: this.$uploadUrl,
-				maxSize: 5 * 1024 * 1024, //限制文件大小 2M
+				maxSize: 20 * 1024 * 1024, //限制文件大小 2M
 				btnLoading: false, //防止重复点击
 				isAdd: true,
 				imgUrls:[],
 				uploadCustom:true,
 				uploadOptions:{
 					"text":"上传营业执照",
-					"imgSrc":"~@/static/img/authentication/xiangji@3x.png",
-					"bgc":"~@/static/img/authentication/business@3x.png"
+					"bgc":"../../static/img/authentication/business@3x.png"
 				},
 				tupian: "",
 				inputContent: null,
@@ -147,6 +147,10 @@
 			onError(error){
 				console.log(error)
 			},
+			onProgress(e){
+				console.log('-----------------------')
+				console.log(e)
+			},
 			onRemove(index) {
 				this.imgUrls.splice(index, 1);
 			},