xydata-tools 1.1.28 → 1.1.29

package/dist/components/uni-app/file-picker/file-picker.vue

@@ -20,8 +20,7 @@
 				<!-- 自定义上传按钮插槽 -->
 				<slot name="upload-button" :select="selectAndUploadFile" :count="fileList.length">
 					<!-- 默认上传按钮 -->
-					<button class="upload-btn" v-if="fileList.length < limit && !uploading"
-						@click="selectAndUploadFile">
+					<button class="upload-btn" v-if="fileList.length < limit && !uploading" @click="selectAndUploadFile">
 						{{ buttonTitle }}
 					</button>
 				</slot>
@@ -37,9 +36,7 @@
 						</view>
 					</view>
 					<view class="file-actions">
-						<view class="action-btn delete-btn" @click="removeFile(index)">
-							×
-						</view>
+						<view class="action-btn delete-btn" @click="removeFile(index)"> × </view>
 					</view>
 				</view>
 			</view>
@@ -62,17 +59,33 @@
 </template>
 
 <script>
-import msWord from '../../../assets/file-icon/ms-word.png'
-import msExcel from '../../../assets/file-icon/ms-excel.png'
-import msPowerpoint from '../../../assets/file-icon/ms-powerpoint.png'
-import pdfIcon from '../../../assets/file-icon/pdf.png'
-import imageIcon from '../../../assets/file-icon/image.png'
-import videoIcon from '../../../assets/file-icon/video.png'
-import documentIcon from '../../../assets/file-icon/document.png'
-import zipIcon from '../../../assets/file-icon/zip.png'
+import msWord from '../../../assets/file-icon/ms-word.png';
+import msExcel from '../../../assets/file-icon/ms-excel.png';
+import msPowerpoint from '../../../assets/file-icon/ms-powerpoint.png';
+import pdfIcon from '../../../assets/file-icon/pdf.png';
+import imageIcon from '../../../assets/file-icon/image.png';
+import videoIcon from '../../../assets/file-icon/video.png';
+import documentIcon from '../../../assets/file-icon/document.png';
+import zipIcon from '../../../assets/file-icon/zip.png';
+
 export default {
 	name: 'FilePicker',
+	// #ifdef VUE3
+	emits: ['change', 'update:modelValue', 'fileLimitReached', 'fileTypeInvalid', 'fileSizeExceed', 'uploadSuccess', 'uploadFail', 'progress', 'click'],
+	// #endif
 	props: {
+		// #ifdef VUE3
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
+		// #ifndef VUE3
+		value: {
+			type: Array,
+			default: () => []
+		},
+		// #endif
 		/** 上传地址 */
 		uploadUrl: {
 			type: String,
@@ -83,7 +96,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
-		/** 文件列表 */
+		/** 文件列表(兼容非v-model用法) */
 		files: {
 			type: Array,
 			default: () => []
@@ -96,7 +109,7 @@ export default {
 		/** 允许的文件扩展名 */
 		accept: {
 			type: Array,
-			default: () => ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
+			default: () => ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx', 'zip', 'rar', 'png', 'jpg']
 		},
 		/** 文件大小限制（MB） */
 		maxSize: {
@@ -114,34 +127,47 @@ export default {
 			fileList: [],
 			uploading: false,
 			uploadProgress: 0,
-			actualUploadUrl: ''  // 实际使用的上传地址
-		}
+			actualUploadUrl: '' // 实际使用的上传地址
+		};
 	},
 	computed: {
 		// 判断是否为H5环境
 		isH5() {
 			// #ifdef H5
-			return true
+			return true;
 			// #endif
 			// #ifndef H5
-			return false
+			return false;
 			// #endif
 		},
 		/** 实际使用的上传地址 */
 		finalUploadUrl() {
-			return this.actualUploadUrl || this.uploadUrl || (getApp().globalData && getApp().globalData.uploadUrl) || ''
+			return this.actualUploadUrl || this.uploadUrl || (getApp().globalData && getApp().globalData.uploadUrl) || '';
+		},
+		/** 统一读取外部值 */
+		internalValue() {
+			// #ifdef VUE3
+			return this.modelValue && this.modelValue.length ? this.modelValue : this.files;
+			// #endif
+			// #ifndef VUE3
+			return this.value && this.value.length ? this.value : this.files;
+			// #endif
 		}
 	},
 	watch: {
-		files(val) {
-			this.fileList = val
+		internalValue: {
+			handler(val) {
+				this.fileList = val || [];
+			},
+			deep: true,
+			immediate: true
 		}
 	},
 	mounted() {
-		this.fileList = this.files
+		this.fileList = this.internalValue || [];
 		// 初始化上传地址
 		if (!this.uploadUrl) {
-			this.actualUploadUrl = (getApp().globalData && getApp().globalData.uploadUrl) || ''
+			this.actualUploadUrl = (getApp().globalData && getApp().globalData.uploadUrl) || '';
 		}
 	},
 	methods: {
@@ -152,7 +178,13 @@ export default {
 		 * @returns {Boolean} - 是否被监听
 		 */
 		hasEventListener(eventName) {
-			return !!(this.$listeners && this.$listeners[eventName])
+			// #ifdef VUE3
+			const onEventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+			return !!(this.$attrs[eventName] || this.$attrs[onEventName]);
+			// #endif
+			// #ifndef VUE3
+			return !!(this.$listeners && this.$listeners[eventName]);
+			// #endif
 		},
 
 		// ==================== 文件处理方法 ====================
@@ -160,33 +192,33 @@ export default {
 		 * 获取文件扩展名
 		 */
 		getFileExtension(fileName) {
-			if (!fileName) return ''
-			const parts = fileName.split('.')
-			return parts.length > 1 ? parts.pop().toLowerCase() : ''
+			if (!fileName) return '';
+			const parts = fileName.split('.');
+			return parts.length > 1 ? parts.pop().toLowerCase() : '';
 		},
 
 		/**
 		 * 获取文件图标
 		 */
 		getFileIcon(fileName) {
-			const ext = this.getFileExtension(fileName)
+			const ext = this.getFileExtension(fileName);
 			switch (ext) {
 				case 'doc':
 				case 'docx':
-					return msWord
+					return msWord;
 				case 'xls':
 				case 'xlsx':
-					return msExcel
+					return msExcel;
 				case 'ppt':
 				case 'pptx':
-					return msPowerpoint
+					return msPowerpoint;
 				case 'pdf':
-					return pdfIcon
+					return pdfIcon;
 				case 'png':
 				case 'jpeg':
 				case 'jpg':
 				case 'gif':
-					return imageIcon
+					return imageIcon;
 				case 'mp4':
 				case 'mov':
 				case 'avi':
@@ -197,13 +229,13 @@ export default {
 				case 'mpg':
 				case 'mpeg':
 				case 'm4v':
-					return videoIcon
+					return videoIcon;
 				case 'rar':
 				case 'zip':
 				case '7z':
-					return zipIcon
+					return zipIcon;
 				default:
-					return documentIcon
+					return documentIcon;
 			}
 		},
 
@@ -211,10 +243,10 @@ export default {
 		 * 格式化文件大小
 		 */
 		formatFileSize(bytes) {
-			if (!bytes) return ''
-			if (bytes < 1024) return bytes + 'B'
-			if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB'
-			return (bytes / (1024 * 1024)).toFixed(2) + 'MB'
+			if (!bytes) return '';
+			if (bytes < 1024) return bytes + 'B';
+			if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB';
+			return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
 		},
 
 		/**
@@ -225,57 +257,44 @@ export default {
 				uni.showToast({
 					title: '请先配置上传地址',
 					icon: 'none'
-				})
-				return
+				});
+				return;
 			}
 
 			if (this.fileList.length >= this.limit || this.uploading) {
 				if (this.fileList.length >= this.limit) {
-					// 触发文件数量限制事件
 					this.$emit('fileLimitReached', {
 						current: this.fileList.length,
 						limit: this.limit
-					})
-
-					// 如果用户未监听事件，显示默认提示
+					});
 					if (!this.hasEventListener('fileLimitReached')) {
 						uni.showToast({
 							title: `最多上传${this.limit}个文件`,
 							icon: 'none'
-						})
+						});
 					}
 				}
-				return
+				return;
 			}
 
 			// #ifdef H5
-			// H5环境使用 uni.chooseFile
 			uni.chooseFile({
 				count: 1,
 				extension: this.accept,
 				success: (res) => {
-					const file = res.tempFiles[0]
-					this.validateAndUpload(file)
-				},
-				fail: (err) => {
-					console.error('选择文件失败:', err)
+					this.validateAndUpload(res.tempFiles[0]);
 				}
-			})
+			});
 			// #endif
 
 			// #ifndef H5
-			// 小程序等环境使用 uni.chooseMessageFile
 			uni.chooseMessageFile({
 				count: 1,
 				extension: this.accept,
 				success: (res) => {
-					const file = res.tempFiles[0]
-					this.validateAndUpload(file)
-				},
-				fail: (err) => {
-					console.error('选择文件失败:', err)
+					this.validateAndUpload(res.tempFiles[0]);
 				}
-			})
+			});
 			// #endif
 		},
 
@@ -283,100 +302,67 @@ export default {
 		 * 验证并上传文件
 		 */
 		validateAndUpload(file) {
-			// 验证文件扩展名
-			const fileName = file.name
-			const ext = this.getFileExtension(fileName)
+			const ext = this.getFileExtension(file.name);
 
-			if (!this.accept.includes(ext)) {
-				// 触发文件类型不支持事件
+			if (this.accept && this.accept.length && !this.accept.includes(ext)) {
 				this.$emit('fileTypeInvalid', {
-					fileName: fileName,
+					fileName: file.name,
 					fileType: ext,
 					acceptTypes: this.accept,
-					file: file,
-					message: `只支持${this.accept.join(', ')}格式`
-				})
-
-				// 如果用户未监听事件，显示默认提示
+					file: file
+				});
 				if (!this.hasEventListener('fileTypeInvalid')) {
 					uni.showToast({
-						title: `只支持${this.accept.join(', ')}格式`,
+						title: `不支持${ext}格式`,
 						icon: 'none'
-					})
+					});
 				}
-				return
+				return;
 			}
 
-			// 验证文件大小
-			const maxBytes = this.maxSize * 1024 * 1024
+			const maxBytes = this.maxSize * 1024 * 1024;
 			if (file.size > maxBytes) {
-				// 触发文件大小超限事件
 				this.$emit('fileSizeExceed', {
 					size: file.size,
 					maxSize: maxBytes,
-					fileName: fileName,
-					file: file,
-					message: `文件大小不能超过${this.maxSize}MB（当前：${this.formatFileSize(file.size)}）`
-				})
-
-				// 如果用户未监听事件，显示默认提示
+					fileName: file.name
+				});
 				if (!this.hasEventListener('fileSizeExceed')) {
 					uni.showToast({
-						title: `文件大小不能超过${this.maxSize}MB`,
+						title: `不能超过${this.maxSize}MB`,
 						icon: 'none'
-					})
+					});
 				}
-				return
+				return;
 			}
 
-			// 开始上传
-			this.uploadFile(file)
+			this.uploadFile(file);
 		},
 
 		/**
-		 * 上传文件
+		 * 上传文件核心
 		 */
 		uploadFile(file) {
-			this.uploading = true
-			this.uploadProgress = 0
-			let uploadTask = {}
-
-			// #ifdef H5
-			uploadTask = uni.uploadFile({
-				url: this.finalUploadUrl,
-				filePath: file.path,
-				name: 'file',
-				success: (uploadFileRes) => {
-					this.handleUploadSuccess(uploadFileRes, file)
-				},
-				fail: (err) => {
-					this.handleUploadError(err)
-				}
-			})
-			// #endif
+			this.uploading = true;
+			this.uploadProgress = 0;
 
-			// #ifndef H5
-			uploadTask = uni.uploadFile({
+			const uploadTask = uni.uploadFile({
 				url: this.finalUploadUrl,
 				filePath: file.path,
 				name: 'file',
 				success: (uploadFileRes) => {
-					this.handleUploadSuccess(uploadFileRes, file)
+					this.handleUploadSuccess(uploadFileRes, file);
 				},
 				fail: (err) => {
-					this.handleUploadError(err)
+					this.handleUploadError(err);
 				}
-			})
-			// #endif
+			});
 
 			// 监听上传进度
 			uploadTask.onProgressUpdate((res) => {
-				this.uploadProgress = res.progress
-				this.$emit('progress', {
-					...res,
-					stage: 'file'
-				})
-			})
+				this.uploadProgress = res.progress;
+				this.$emit('progress', res);
+			});
 		},
 
 		/**
@@ -384,35 +370,35 @@ export default {
 		 */
 		handleUploadSuccess(uploadFileRes, originalFile) {
 			try {
-				const result = JSON.parse(uploadFileRes.data)
-				console.log('文件上传成功:', result)
+				const result = JSON.parse(uploadFileRes.data);
+				console.log('文件上传成功:', result);
 
 				const fileInfo = {
 					fileName: result.data.fileName,
 					name: result.data.originFileName || originalFile.name,
 					url: result.data.pathUrl
-				}
+				};
 
-				this.fileList.push(fileInfo)
-				this.uploadProgress = 100
-				this.uploading = false
-				this.emitChange()
+				this.fileList.push(fileInfo);
+				this.uploadProgress = 100;
+				this.uploading = false;
+				this.emitChange();
 
 				// 触发上传成功事件
 				this.$emit('uploadSuccess', {
 					file: fileInfo,
 					response: result
-				})
+				});
 
 				// 如果用户未监听事件，显示默认提示
 				if (!this.hasEventListener('uploadSuccess')) {
 					uni.showToast({
 						title: '上传成功',
 						icon: 'success'
-					})
+					});
 				}
 			} catch (e) {
-				this.handleUploadError(e)
+				this.handleUploadError(e);
 			}
 		},
 
@@ -420,24 +406,24 @@ export default {
 		 * 处理上传失败
 		 */
 		handleUploadError(err) {
-			console.error('文件上传失败:', err)
+			console.error('文件上传失败:', err);
 
 			// 触发上传失败事件
 			this.$emit('uploadFail', {
 				error: err,
 				message: '文件上传失败'
-			})
+			});
 
 			// 如果用户未监听事件，显示默认提示
 			if (!this.hasEventListener('uploadFail')) {
 				uni.showToast({
 					icon: 'none',
 					title: '文件上传失败'
-				})
+				});
 			}
 
-			this.uploading = false
-			this.uploadProgress = 0
+			this.uploading = false;
+			this.uploadProgress = 0;
 		},
 
 		/**
@@ -449,11 +435,11 @@ export default {
 				content: '确定要删除该文件吗？',
 				success: (res) => {
 					if (res.confirm) {
-						this.fileList.splice(index, 1)
-						this.emitChange()
+						this.fileList.splice(index, 1);
+						this.emitChange();
 					}
 				}
-			})
+			});
 		},
 
 		/**
@@ -461,26 +447,26 @@ export default {
 		 */
 		handleFileClick(file) {
 			if (this.hasEventListener('click')) {
-				this.$emit('click', file)
-				return
+				this.$emit('click', file);
+				return;
 			}
 
 			if (!file.url) {
 				uni.showToast({
 					title: '文件地址无效',
 					icon: 'none'
-				})
-				return
+				});
+				return;
 			}
 
 			// #ifdef H5
 			// H5环境直接下载
-			this.downloadFileH5(file)
+			this.downloadFileH5(file);
 			// #endif
 
 			// #ifndef H5
 			// 小程序等环境使用 uni.openDocument
-			this.openDocument(file)
+			this.openDocument(file);
 			// #endif
 		},
 
@@ -490,36 +476,36 @@ export default {
 		downloadFileH5(file) {
 			uni.showLoading({
 				title: '下载中...'
-			})
+			});
 
 			// 使用 fetch 下载文件
 			fetch(file.url)
-				.then(res => res.blob())
-				.then(blob => {
+				.then((res) => res.blob())
+				.then((blob) => {
 					// 创建 blob URL
-					const blobUrl = URL.createObjectURL(blob)
-					const a = document.createElement('a')
-					a.href = blobUrl
-					a.download = file.name
-					document.body.appendChild(a)
-					a.click()
-					document.body.removeChild(a)
+					const blobUrl = URL.createObjectURL(blob);
+					const a = document.createElement('a');
+					a.href = blobUrl;
+					a.download = file.name;
+					document.body.appendChild(a);
+					a.click();
+					document.body.removeChild(a);
 
 					// 释放 blob URL
 					setTimeout(() => {
-						URL.revokeObjectURL(blobUrl)
-					}, 100)
+						URL.revokeObjectURL(blobUrl);
+					}, 100);
 
-					uni.hideLoading()
+					uni.hideLoading();
 				})
-				.catch(err => {
-					console.error('下载文件失败:', err)
-					uni.hideLoading()
+				.catch((err) => {
+					console.error('下载文件失败:', err);
+					uni.hideLoading();
 					uni.showToast({
 						title: '下载失败',
 						icon: 'none'
-					})
-				})
+					});
+				});
 		},
 
 		/**
@@ -527,23 +513,23 @@ export default {
 		 */
 		openDocument(file) {
 			// 判断文件类型是否为可打开的文档类型
-			const ext = this.getFileExtension(file.name)
-			const supportedTypes = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
-			const isDocument = supportedTypes.includes(ext)
-			
-			const imageTypes = ['png', 'jpeg', 'jpg', 'gif']
-			console.log(ext)
+			const ext = this.getFileExtension(file.name);
+			const supportedTypes = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
+			const isDocument = supportedTypes.includes(ext);
+
+			const imageTypes = ['png', 'jpeg', 'jpg', 'gif'];
+			console.log(ext);
 			if (imageTypes.includes(ext)) {
 				uni.previewImage({
 					urls: [file.url]
-				})
-				return
+				});
+				return;
 			}
 
 			// 显示加载提示
 			uni.showLoading({
 				title: isDocument ? '正在打开...' : '正在下载...'
-			})
+			});
 
 			// 下载文件
 			uni.downloadFile({
@@ -556,69 +542,75 @@ export default {
 								filePath: res.tempFilePath,
 								fileType: ext,
 								success: () => {
-									uni.hideLoading()
+									uni.hideLoading();
 								},
 								fail: (err) => {
-									console.error('打开文档失败:', err)
-									uni.hideLoading()
+									console.error('打开文档失败:', err);
+									uni.hideLoading();
 									uni.showToast({
 										title: '打开文档失败',
 										icon: 'none'
-									})
+									});
 								}
-							})
+							});
 						} else {
 							// 保存文件到本地
 							uni.saveFile({
 								tempFilePath: res.tempFilePath,
 								success: (saveRes) => {
-									uni.hideLoading()
+									uni.hideLoading();
 									uni.showToast({
 										title: '已保存到本地',
 										icon: 'success'
-									})
+									});
 								},
 								fail: () => {
-									uni.hideLoading()
+									uni.hideLoading();
 									uni.showToast({
 										title: '保存失败',
 										icon: 'none'
-									})
+									});
 								}
-							})
+							});
 						}
 					} else {
-						uni.hideLoading()
+						uni.hideLoading();
 						uni.showToast({
 							title: '下载失败',
 							icon: 'none'
-						})
+						});
 					}
 				},
 				fail: (err) => {
-					console.error('下载失败:', err)
-					uni.hideLoading()
+					console.error('下载失败:', err);
+					uni.hideLoading();
 					uni.showToast({
 						title: '下载失败',
 						icon: 'none'
-					})
+					});
 				}
-			})
+			});
 		},
 
 		/**
 		 * 触发变更事件
 		 */
 		emitChange() {
-			this.$emit('change', this.fileList)
+			this.$emit('change', this.fileList);
+			// #ifdef VUE3
+			this.$emit('update:modelValue', this.fileList);
+			// #endif
+			// #ifndef VUE3
+			this.$emit('input', this.fileList);
+			// #endif
 		},
 
 		/**
-	   * 获取文件列表
-	   * @returns {Array} 文件列表
-	   */
+		 * 获取文件列表
+		 * @returns {Array} 文件列表
+		 */
 		getFileList() {
-			return this.fileList
+			return this.fileList;
 		},
 
 		/**
@@ -626,14 +618,14 @@ export default {
 		 * @returns {String} JSON 字符串
 		 */
 		getParams() {
-			const params = this.fileList.map(file => {
-				const { url, ...rest } = file
-				return rest
-			})
-			return JSON.stringify(params)
+			const params = this.fileList.map((file) => {
+				const { url, ...rest } = file;
+				return rest;
+			});
+			return JSON.stringify(params);
 		}
 	}
-}
+};
 </script>
 
 <style lang="scss">