【优化】`素材管理` 上传素材时的进度条样式

changelog.new.md

-* 1、【升级】`vk-unicloud-admin-ui` 包升级至 `1.16.9`
-* 2、【优化】`万能表格` 右侧按钮支持属性 icon、plain、round、circle、loading
-* 3、【优化】其他细节
+* 1、【升级】`vk-unicloud-admin-ui` 包升级至 `1.16.12`
+* 2、【优化】`素材管理` 上传素材时的进度条样式
+
 
 ##### 框架更新步骤 [点击查看](https://vkdoc.fsq.pub/admin/1/update.html)
 ##### 框架学习Q群：`22466457` 欢迎萌新和大佬来使用和共同改进框架

package-lock.json

 {
     "name": "vk-unicloud-admin",
-    "version": "1.16.0",
+    "version": "1.16.1",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -104,9 +104,9 @@
             }
         },
         "vk-unicloud-admin-ui": {
-            "version": "1.16.9",
-            "resolved": "https://registry.npmjs.org/vk-unicloud-admin-ui/-/vk-unicloud-admin-ui-1.16.9.tgz",
-            "integrity": "sha512-KSoVHJa6TSsw4z0lL9L0HIHJnVq/fuA65InZFTEtdRz3+PAguXOtuya0k9uGQu/gXElMD9XtL2mxxlTNrbXaMQ=="
+            "version": "1.16.12",
+            "resolved": "https://registry.npmjs.org/vk-unicloud-admin-ui/-/vk-unicloud-admin-ui-1.16.12.tgz",
+            "integrity": "sha512-bcseNjlZMrzs1fnji/KRiZVyshB46KaTIO/f5aLm26LUSXU4K7ulIrSPPEnhTtQYWpNto1F4G0XEBRVVB/9iyA=="
         },
         "vuedraggable": {
             "version": "2.24.3",

package.json

@@ -22,7 +22,7 @@
     "dependencies": {
         "element-ui": "2.15.13",
         "umy-ui": "1.1.6",
-        "vk-unicloud-admin-ui": "^1.16.9"
+        "vk-unicloud-admin-ui": "^1.16.12"
     },
     "engines": {
         "HBuilderX": "^3.1.10"

pages_plugs/system_uni/uni-id-files/form/uploadProgress.vue

+<template>
+	<vk-data-dialog
+		v-model="value.show"
+		:title="page.title"
+		:top="page.top"
+		:width="page.width"
+		:close-on-click-modal="false"
+		:show-fullscreen="false"
+		:show-close="false"
+		:destroy-on-close="true"
+		mode="form"
+	>
+		<!-- 页面主体内容开始 -->
+			<view class="body" v-if="total>1">
+				<view>
+					<text>总进度：{{ currentIndex+1 }} / {{ total }}</text>
+					<el-progress :percentage="totalPercentage"></el-progress>
+				</view>
+				<view style="margin-top: 10px;">
+					<text>文件{{currentIndex+1}}进度：</text>
+					<el-progress :percentage="currentPercentage"></el-progress>
+				</view>
+				<view style="margin-top: 10px;text-align: center;">正在上传第 {{currentIndex+1}} 个文件</view>
+			</view>
+			<view class="body" v-else>
+				<view style="text-align: center;">
+					<el-progress :percentage="currentPercentage" type="circle"></el-progress>
+				</view>
+			</view>
+		<!-- 页面主体内容结束 -->
+	</vk-data-dialog>
+</template>
+
+<script>
+var that; // 当前页面对象
+var vk = uni.vk; // vk实例
+export default {
+	props: {
+		value: {
+			Type: Object,
+			default: function() {
+				return {
+					show: false,
+					mode: "",
+					item: {}
+				};
+			}
+		}
+	},
+	data: function() {
+		// 组件创建时,进行数据初始化
+		return {
+			page: {
+				title: "上传进度",
+				submitText: "确定",
+				cancelText: "关闭",
+				showCancel: true,
+				top: "40vh",
+				width: "500px"
+			},
+			total:0,
+			totalPercentage: 0, // 总进度
+			currentPercentage: 0, // 当前文件进度
+			currentIndex: 0,
+		};
+	},
+	mounted() {
+		that = this;
+		that.init();
+	},
+	methods: {
+		// 初始化
+		init() {
+			let { value } = that;
+			that.$emit("input", value);
+		},
+		// 监听 - 页面打开
+		onOpen() {
+			that = this;
+			let { item={} } = that.value;
+			that.upload(item);
+		},
+		// 监听 - 页面关闭
+		onClose() {
+
+		},
+		async upload(item){
+			let that = this;
+			let { vk } = that;
+			let { tempFilePaths, tempFiles, categoryId, fileType } = item;
+			that.total = tempFilePaths.length;
+			that.totalPercentage = 0;
+			for (let i = 0; i < tempFilePaths.length; i++) {
+				that.currentPercentage = 0;
+				that.currentIndex = i;
+				let percentage = vk.pubfn.toDecimal((i+1) / tempFilePaths.length * 100, 0);
+				try {
+					await vk.uploadFile({
+						filePath: tempFilePaths[i],
+						file: tempFiles[i],
+						needSave: true,
+						fileType,
+						category_id: categoryId,
+						onUploadProgress:(progressRes) => {
+							// 上传过程中
+							that.currentPercentage = progressRes.progress;
+						},
+					});
+					that.totalPercentage = percentage;
+				} catch(err){
+					console.error(err);
+				}
+			}
+			that.onSuccess();
+		},
+		// 监听 - 提交成功后
+		onSuccess() {
+			that.value.show = false; // 关闭页面
+			that.$emit("success");
+		}
+	},
+	watch: {
+		"value.show": {
+			handler(newValue, oldValue) {
+				let that = this;
+				if (newValue) {
+					that.onOpen();
+				} else {
+					that.onClose();
+				}
+			}
+		}
+	},
+	// 计算属性
+	computed: {}
+};
+</script>
+
+<style lang="scss" scoped>
+	.body{
+		padding: 30px;
+	}
+</style>

pages_plugs/system_uni/uni-id-files/list.vue

@@ -121,6 +121,8 @@
 		<updateFileName v-model="formDatas.updateFileName"></updateFileName>
 		<updateVideo v-model="formDatas.updateVideo"></updateVideo>
 		<preview v-model="formDatas.preview"></preview>
+		<uploadProgress v-model="formDatas.uploadProgress" @success="getList();"></uploadProgress>
+
 
 	</view>
 </template>
@@ -135,6 +137,7 @@ import updateFileCategory from "./form/updateFileCategory";
 import updateFileName from "./form/updateFileName";
 import updateVideo from "./form/updateVideo";
 import preview from "./form/preview";
+import uploadProgress from "./form/uploadProgress";
 
 export default {
 	components: {
@@ -143,7 +146,8 @@ export default {
 		updateFileCategory,
 		updateFileName,
 		updateVideo,
-		preview
+		preview,
+		uploadProgress
 	},
 	data() {
 		// 页面数据变量
@@ -283,10 +287,10 @@ export default {
 			let fileType;
 			let extension = [];
 			if(type === "image"){
-				extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg"];
+				extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
 				fileType = "image";
 			}else if(type === "video"){
-				extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv"];
+				extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg", "dat", "asf"];
 				fileType = "video";
 			}else if(type === "other"){
 				extension = ["txt","pdf","xls","xlsx","ppt","pptx","doc","docx","rar","zip"];
@@ -294,24 +298,35 @@ export default {
 			uni.chooseFile({
 				extension,
 				success: async res => {
-					vk.showLoading("上传中...");
-					for (let i = 0; i < res.tempFilePaths.length; i++) {
-						let percentage = vk.pubfn.toDecimal((i+1) / res.tempFilePaths.length * 100, 0);
-						vk.showLoading(`上传进度：${percentage}%`);
-						try {
-							await vk.callFunctionUtil.uploadFile({
-								filePath: res.tempFilePaths[i],
-								file: res.tempFiles[i],
-								needSave: true,
-								fileType,
-								category_id: that.queryForm1.formData.category_id
-							});
-						} catch(err){
-							console.error(err);
-						}
-					}
-					vk.hideLoading();
-					that.getList();
+					let item = {
+						tempFilePaths: res.tempFilePaths,
+						tempFiles: res.tempFiles,
+						categoryId: that.queryForm1.formData.category_id,
+						fileType,
+					};
+					vk.pubfn.openForm('uploadProgress', { item });
+					// vk.showLoading("上传中...");
+					// for (let i = 0; i < res.tempFilePaths.length; i++) {
+					// 	let percentage = vk.pubfn.toDecimal((i+1) / res.tempFilePaths.length * 100, 0);
+					// 	try {
+					// 		await vk.uploadFile({
+					// 			filePath: res.tempFilePaths[i],
+					// 			file: res.tempFiles[i],
+					// 			needSave: true,
+					// 			fileType,
+					// 			category_id: that.queryForm1.formData.category_id,
+					// 			onUploadProgress:function(progressRes){
+					// 				// 上传过程中
+					// 				vk.showLoading(`文件${i+1}：${progressRes.progress}%\n`);
+					// 			},
+					// 		});
+					// 		vk.showLoading(`总上传进度：${percentage}%`);
+					// 	} catch(err){
+					// 		console.error(err);
+					// 	}
+					// }
+					// vk.hideLoading();
+					// that.getList();
 				}
 			});
 		},
@@ -376,6 +391,7 @@ export default {
 			}else{
 				src = `${url}?x-oss-process=video/snapshot,t_1000,f_jpg,w_${width},h_${height},m_fast`;
 			}
+			console.log('src: ', src)
 			return src;
 		},
 		durationFilter(value){

uniCloud-aliyun/cloudfunctions/router/service/user/kh/addUploadRecord.js

@@ -5,10 +5,14 @@ module.exports = {
 	 * data 请求参数 说明
 	 * @param {String} url					文件外网访问url
 	 * @param {String} name 				文件名
-	 * @param {Number} size				文件大小
+	 * @param {Number} size					文件大小
 	 * @param {String} file_id			文件id
-	 * @param {String} provider		供应商
-	 * @param {String} category_id 分类ID
+	 * @param {String} provider			供应商
+	 * @param {String} category_id	分类ID
+	 * @param {Number} width				图片\视频的宽度
+	 * @param {Number} height				图片\视频的高度
+	 * @param {Number} orientation	图片\视频的旋转方向
+	 * @param {Number} duration			视频的总时长
 	 * res 返回参数说明
 	 * @param {Number} code 错误码，0表示成功
 	 * @param {String} msg 详细信息
@@ -32,12 +36,15 @@ module.exports = {
 			duration
 		} = data;
 		let type = "other";
-		let suffix = url.substring(url.lastIndexOf(".") + 1).toLowerCase();
-		if (["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"].indexOf(suffix) > -1) {
+
+		if (vk.pubfn.test(url, "image")) {
 			type = "image";
-		} else if (["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv"].indexOf(suffix) > -1) {
+		} else if (vk.pubfn.test(url, "video")) {
 			type = "video";
+		} else if (vk.pubfn.test(url, "audio")) {
+			type = "video"; // 这里audio也分类为video
 		}
+
 		if (vk.pubfn.isNull(original_name)) original_name = url;
 		let dataJson = {
 			user_id: uid,
@@ -65,4 +72,4 @@ module.exports = {
 		// 业务逻辑结束-----------------------------------------------------------
 		return res;
 	}
-}
+}
\ No newline at end of file