From 65777783a6b9022488a1ac40870ca7a86643e49b Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Fri, 5 Dec 2025 10:58:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20base=20=E5=A2=9E=E5=8A=A0xtUpload?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/xtUpload.vue | 278 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 278 insertions(+)
 create mode 100644 components/xtUpload.vue

diff --git a/components/xtUpload.vue b/components/xtUpload.vue
new file mode 100644
index 0000000..33e178b
--- /dev/null
+++ b/components/xtUpload.vue
@@ -0,0 +1,278 @@
+<template>
+	<view style="width: 100%;">
+		<button @click="choseFiles" size="mini" type="primary" :disabled="disabled">选择</button>
+		<view v-for="(item, index) in fileList" :key="index" style="height: 16px; margin-bottom: 12px;">
+			<view style="display:flex; justify-content: space-between;">
+				<view style="color:blue" @click="preview(item)">{{ item.name }}</view>
+				<view style="color:red;font-weight: bold;" @click="handleRemove(index)" v-if="disabled == false">×</view>
+			</view>
+			<view style="height:2px"></view>
+			<progress :percent="item.percent" activeColor="#4caf50" backgroundColor="#e0e0e0" stroke-width="2" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+    // FILE_TYPE_DOC = 10
+    // FILE_TYPE_VIDEO = 20
+    // FILE_TYPE_AUDIO = 30
+    // FILE_TYPE_PIC = 40
+    // FILE_TYPE_OTHER = 50
+import config from '@/utils/config.js'
+import { ref, onMounted, watch, defineEmits } from 'vue';
+const emit = defineEmits(["update:modelValue", "update:obj"]);
+
+const props = defineProps({
+	xtype: { type: String, default: "path" },       // path 或 id
+	modelValue: { type: [Array, String], default: undefined },
+	obj: { type: Object, default: () => ({}) },
+	accept: { type: String, default: '' },
+	countMax: { type: Number, default: 1 },
+	sizeMax: { type: Number, default: 1024 * 1024 * 5 },
+	disabled: { type: Boolean, default: false },
+});
+
+// ⚠ reactive([]) 不能整体赋值，用 ref 更合理
+const fileList = ref([])
+const disabled = ref(props.disabled)
+
+// header / action
+const header = {
+	Authorization: `Bearer ${uni.getStorageSync('access')}`
+}
+const action = `${config.baseUrl}/file/`
+
+const inited = ref(false)
+onMounted(() => {
+	disabled.value = true
+	checkPropsUntilReady()
+})
+
+const checkPropsUntilReady = () => {
+    if (inited.value) return
+
+    if (props.modelValue !== undefined) {
+        initFileList()
+		if (props.disabled == false) {
+			disabled.value = false
+		}
+        inited.value = true
+        return
+    }
+    // ⭐ 每 200ms 查一次（非常轻量）
+    setTimeout(checkPropsUntilReady, 200)
+}
+
+const changeVal = () => {
+	let val = null;
+	if (props.xtype == "id") {
+		if (props.countMax > 1){
+			val= []
+			fileList.value.forEach(item => {
+				if(item.id){
+					val.push(item.id)
+				}
+			})
+		}else if (props.countMax == 1){
+			val = null;
+			if (fileList.value && fileList.value.length > 0 && fileList.value[0].id) {
+				val = fileList.value[0].id
+			}
+		}
+	}else if (props.xtype == "path"){
+		if (props.countMax > 1){
+			val = []
+			fileList.value.forEach(item => {
+				if(item.path && item.percent == 100){
+					val.push(item.path)
+				}
+			})
+		}else if (props.countMax == 1){
+			val = null;
+			if (fileList.value && fileList.value.length > 0 && fileList.value[0].path && fileList.value[0].percent == 100) {
+				val = fileList.value[0].path
+			}
+		}
+	}
+	
+	let obj = null;
+	emit("update:modelValue", val)
+	if (props.countMax > 1) {
+		obj = fileList.value
+	    emit("update:obj", obj)
+	}else{
+		if (fileList.value && fileList.value.length > 0) {
+			obj = fileList.value[0]
+			emit("update:obj", obj)
+		} else {
+			emit("update:obj", obj)
+		}
+	}
+	console.log(val, obj)
+}
+
+const getFileType = (path) =>{
+	let type = path.substring(path.lastIndexOf('.') + 1, path.length).toLowerCase()
+	if (type === 'png' || type === 'jpg' || type === 'jpeg' || type === 'gif' || type === 'bmp') {
+		return 40
+	}
+	else if (type === 'mp4' || type === 'avi' || type === 'rmvb') {
+		return 20
+	}
+	else if (type === 'mp3' || type === 'wav' || type === 'wma') {
+		return 30
+	}
+	return 10
+}
+/**
+ * 初始化 fileList
+ */
+const initFileList = () => {
+	if (props.countMax > 1) {
+		let clist = []
+
+		// xtype = id 情况
+		if (props.xtype === "id" && Array.isArray(props.obj) && props.obj.length > 0) {
+
+			props.obj.forEach(item => {
+				clist.push({
+					...item,
+					url: `${config.hostUrl}${item.path}`,
+					percent: 100
+				})
+			})
+			fileList.value = clist
+		}
+		else if (props.xtype === "path" && props.modelValue) {
+			props.modelValue.forEach(item => {
+			    clist.push({
+					path: item,
+					url: `${config.hostUrl}${item}`,
+					percent: 100,
+					type: getFileType(item)
+				})
+			})
+			fileList.value = clist
+		}
+	} else if (props.countMax == 1) {
+		let clist = []
+		if (props.xtype === "id" && props.modelValue) {
+			clist.push({
+				...props.obj,
+				url: `${config.hostUrl}${props.obj.path}`,
+				percent: 100
+			})
+			fileList.value = clist
+		} else if (props.xtype === "path" && props.modelValue) {
+		    clist.push({
+				path: props.modelValue,
+				url: `${config.hostUrl}${props.modelValue}`,
+				percent: 100,
+				type: getFileType(props.obj.path)
+			})
+			fileList.value = clist
+		}
+	}
+}
+
+const handleRemove = (index) => {
+	let upTask = fileList.value[index].upTask
+	if (upTask) {
+		upTask.abort()
+	}
+    fileList.value.splice(index, 1)
+	changeVal()
+}
+
+const preview = (item) => {
+	if (item.type == 40) {
+		// 获取所有类型为 40 的图片 URL
+		const urls = fileList.value
+			.filter(file => file.type === 40)
+			.map(file => file.url)
+		
+		// 找到当前图片的索引
+		const currentIndex = urls.indexOf(item.url)
+		
+		uni.previewImage({
+			current: currentIndex >= 0 ? currentIndex : 0,
+			urls: urls,
+		})
+	}
+}
+
+const choseFiles = () => {
+	if (fileList.value.length >= props.countMax) {
+		uni.showToast({
+			title: `最多只能上传${props.countMax}个文件`,
+			icon: 'none'
+		})
+		return
+	}
+
+	uni.chooseFile({
+		count: props.countMax - fileList.value.length,
+		success(res) {
+			const tempFiles = res.tempFiles;
+
+			tempFiles.forEach(item => {
+				// 文件大小校验（单位：字节）
+				if (item.size > props.sizeMax * 1024 * 1024) {
+					uni.showToast({
+						title: `文件大小不能超过${props.sizeMax}M`,
+						icon: 'none'
+					})
+					return;
+				}
+
+				// 创建上传任务
+				const upTask = uni.uploadFile({
+					url: action,
+					filePath: item.path,
+					name: 'file',
+					formData: {},
+					header: header,
+					success: (uploadRes) => {
+						const data = JSON.parse(uploadRes.data || "{}")
+						if (data) {
+							fileList.value.forEach((file, index) => {
+								if (file.path === item.path) {
+									fileList.value[index].url = `${config.hostUrl}${data.path}`
+									fileList.value[index].path = data.path
+									fileList.value[index].percent = 100
+									fileList.value[index].id = data.id
+									fileList.value[index].upTask = null
+								}
+							})
+							// console.log("fv", fileList.value)
+							changeVal()
+						}
+					},
+					fail: (err) => {
+						console.log("上传失败:", err)
+					}
+				})
+
+				// 添加到列表
+				fileList.value.push({
+					name: item.name,
+					url: null,
+					path: item.path,
+					percent: 0,
+					type: getFileType(item.name),
+					upTask: upTask
+				})
+
+				// 🔥 关键修复：关联上传进度
+				upTask.onProgressUpdate((res) => {
+					fileList.value.forEach((file, index) => {
+						if (file.path === item.path) {
+							fileList.value[index].percent = res.progress
+						}
+					})
+				});
+			})
+		}
+	})
+}
+</script>