新增upload组件的before-upload钩子

wlxuqu · wlxuqu · commit c2f3c8da9be1 · 2020-06-21T16:00:02.000+08:00
diff --git a/pages.json b/pages.json
@@ -2,14 +2,14 @@
 	"easycom": {
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
-	"condition": { //模式配置，仅开发期间生效
-		"current": 0, //当前激活的模式(list 的索引项)
-		"list": [{
-			"name": "test", //模式名称
-			"path": "pages/componentsA/select/index", //启动页面，必选
-			"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
-		}] 
-	},
+	// "condition": { //模式配置，仅开发期间生效
+	// 	"current": 0, //当前激活的模式(list 的索引项)
+	// 	"list": [{
+	// 		"name": "test", //模式名称
+	// 		"path": "pages/componentsA/select/index", //启动页面，必选
+	// 		"query": "id=1&name=2" //启动参数，在页面的onLoad函数里面得到
+	// 	}] 
+	// },
 	"pages": [
 		// 演示-组件 
 		{
diff --git a/pages/componentsB/upload/index.vue b/pages/componentsB/upload/index.vue
@@ -14,7 +14,7 @@
 						 :percent="item.progress"></u-line-progress>
 					</view>
 				</view>
-				<u-upload ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
+				<u-upload :beforeUpload="beforeUpload" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
 				 :show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange">
 					<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
 						<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
@@ -53,7 +53,7 @@
 	export default {
 		data() {
 			return {
-				action: 'http://192.168.100.17/index.php/index/index/upload',
+				action: 'http://www.tp5.com',
 				// 预置上传列表
 				fileList: [],
 				// fileList: [{
@@ -70,6 +70,9 @@
 				maxCount: 2,
 				lists: [], // 组件内部的文件列表
 			}
+		},
+		onLoad() {
+			
 		},
 		methods: {
 			reUpload() {
@@ -136,6 +139,9 @@
 			onListChange(lists) {
 				// console.log('onListChange', lists);
 				this.lists = lists;
+			},
+			beforeUpload(index, lists) {
+				return true;
 			}
 		}
 	}
diff --git a/uview-ui/components/u-upload/u-upload.vue b/uview-ui/components/u-upload/u-upload.vue
@@ -334,7 +334,7 @@ export default {
 			this.uploadFile(index);
 		},
 		// 上传图片
-		uploadFile(index = 0) {
+		async uploadFile(index = 0) {
 			if (this.disabled) return;
 			if (this.uploading) return;
 			// 全部上传完成
@@ -353,13 +353,22 @@ export default {
 				return;
 			}
 			// 执行before-upload钩子
-			// if(this.beforeUpload && typeof(this.beforeUpload) === 'function') {
-			// 	let beforeResponse = this.beforeUpload(index, this.lists);
-			// 	if (beforeResponse && beforeResponse.then) {
-					
-			// 	}
-			// }
-			
+			if(this.beforeUpload && typeof(this.beforeUpload) === 'function') {
+				// 执行回调，同时传入索引和文件列表当作参数
+				let beforeResponse = this.beforeUpload(index, this.lists);
+				// 判断是否返回了promise
+				if (!!beforeResponse && typeof beforeResponse.then === 'function') {
+					await beforeResponse.then(res => {
+						// promise返回成功，不进行动作，继续上传
+					}).catch(err => {
+						// 进入catch回调的话，继续下一张
+						return this.uploadFile(index + 1);
+					})
+				} else if(beforeResponse === false) {
+					 // 如果返回false，继续下一张图片的上传
+					return this.uploadFile(index + 1);
+				}
+			}
 			this.lists[index].error = false;
 			this.uploading = true;
 			// 创建上传对象
