im-ui-mobile 0.0.98 → 0.1.0

package/components/im-file-upload/im-file-upload.vue

@@ -1,309 +1,309 @@
-<template>
-	<view v-if="visible" class="file-upload">
-		<u-upload ref="uploadRef" :max-count="props.maxCount" :max-size="props.maxSize" :size-type="props.sizeType"
-			:source-type="props.sourceType" :deletable="props.deletable" :preview-full-image="props.previewFullImage"
-			:multiple="props.multiple" :disabled="props.disabled" :custom-btn="props.customBtn"
-			:show-progress="props.showProgress" :upload-text="props.uploadText" :width="props.width"
-			:height="props.height" @after-read="onAfterRead" @delete="onDelete" @oversize="onOversize">
-			<!-- 自定义上传按钮 -->
-			<slot></slot>
-		</u-upload>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-
-// 定义类型
-interface UploadFile {
-	url: string
-	name?: string
-	size?: number
-	type?: string
-	progress?: number
-	status?: 'uploading' | 'success' | 'error'
-	response?: any
-}
-
-interface AfterReadFile {
-	name: string
-	size: number
-	thumb: string
-	type: string
-	url: string
-}
-
-interface UploadProps {
-	// 文件列表
-	modelValue?: UploadFile[]
-	// 最大上传数量
-	maxCount?: number
-	// 单个文件大小限制（字节）
-	maxSize?: number
-	// 文件大小选择 ['original', 'compressed']
-	sizeType?: string[]
-	// 文件来源 ['album', 'camera']
-	sourceType?: string[]
-	// 是否显示删除按钮
-	deletable?: boolean
-	// 是否预览完整图片
-	previewFullImage?: boolean
-	// 是否多选
-	multiple?: boolean
-	// 是否禁用
-	disabled?: boolean
-	// 是否使用自定义按钮
-	customBtn?: boolean
-	// 是否显示进度条
-	showProgress?: boolean
-	// 上传文字提示
-	uploadText?: string
-	// 图片宽度
-	width?: number | string
-	// 图片高度
-	height?: number | string
-	// 上传地址
-	action?: string
-	// 上传字段名
-	name?: string
-	// 请求头
-	headers?: Record<string, string>
-	// 附加数据
-	data?: Record<string, any>
-	// 是否自动上传
-	autoUpload?: boolean,
-	// 令牌
-	token?: string
-}
-
-interface UploadEmits {
-	(e: 'update:modelValue', files: UploadFile[]): void
-	(e: 'change', files: UploadFile[]): void
-	(e: 'before', file: UploadFile): void
-	(e: 'success', file: UploadFile, response: any): void
-	(e: 'fail', file: UploadFile, error: any): void
-	(e: 'progress', file: UploadFile, progress: number): void
-	(e: 'delete', file: UploadFile, index: number): void
-	(e: 'oversize', file: UploadFile): void
-}
-
-// Props 和 Emits
-const props = withDefaults(defineProps<UploadProps>(), {
-	modelValue: () => [],
-	maxCount: 9,
-	maxSize: 10 * 1024 * 1024, // 10MB
-	sizeType: () => ['original', 'compressed'],
-	sourceType: () => ['album', 'camera'],
-	deletable: true,
-	previewFullImage: true,
-	multiple: true,
-	disabled: false,
-	customBtn: false,
-	showProgress: true,
-	uploadText: '',
-	width: 50,
-	height: 50,
-	action: '', // https://example.com/file/upload
-	name: 'file',
-	headers: () => ({
-		'Authorization': `Bearer xxx`,
-		'AccessToken': 'xxx',
-		'Content-Type': 'multipart/form-data'
-	}),
-	data: () => ({}),
-	autoUpload: true,
-	token: ''
-})
-
-const emit = defineEmits<UploadEmits>()
-
-// 响应式数据
-const uploadRef = ref()
-const fileList = ref<UploadFile[]>([])
-const uploadingFiles = reactive(new Map<string, UploadFile>())
-const fileMap = ref(new Map<string, any>());
-const visible = ref(true)
-
-// 监听 modelValue 变化
-watch(() => props.modelValue, (newVal) => {
-	fileList.value = [...newVal]
-}, { immediate: true, deep: true })
-
-// 文件选择后读取
-const onAfterRead = async ({ file }: any) => {
-	const files: AfterReadFile[] = file
-
-	for (const item of files) {
-		// before
-		if (!fileMap.value.has(item.name)) {
-			emit('before', item)
-			fileMap.value.set(item.name, item);
-		}
-
-		const uploadFile: UploadFile = {
-			url: item.url,
-			name: item.name,
-			size: item.size,
-			type: item.type,
-			progress: 0,
-			status: 'uploading'
-		}
-
-		const fileId = generateFileId()
-		uploadingFiles.set(fileId, uploadFile)
-
-		// 添加到文件列表
-		fileList.value.push(uploadFile)
-		emitFileChange()
-
-		if (props.autoUpload) {
-			await uploadFileToServer(item, uploadFile, fileId)
-		} else {
-			uploadFile.status = 'success'
-			uploadingFiles.delete(fileId)
-		}
-	}
-}
-
-// 上传文件到服务器
-const uploadFileToServer = (file: AfterReadFile, uploadFile: UploadFile, fileId: string): Promise<void> => {
-	return new Promise((resolve) => {
-		if (!props.action) {
-			// 如果没有上传地址，直接标记为成功
-			uploadFile.status = 'success'
-			uploadFile.response = { message: 'No upload action provided' }
-			uploadingFiles.delete(fileId)
-			emit('success', file, uploadFile)
-			resolve()
-			return
-		}
-
-		const headers = {
-			'Authorization': `Bearer ${props.token}`,
-			'AccessToken': props.token,
-			// 'Content-Type': 'multipart/form-data' // Commented by Joncky becauce of error "Failed to read the request form. Missing content-type boundary." 
-		}
-
-		uni.uploadFile({
-			url: props.action,
-			filePath: file.url,
-			name: props.name,
-			header: headers,
-			// formData: props.data,
-			success: (res) => {
-				uploadFile.response = res
-
-				try {
-					uploadFile.status = 'success'
-					uploadFile.progress = 100
-
-
-					fileList.value.splice(fileList.value.length - 1, 1, {
-						...file,
-						...res,
-						status: 'success'
-					})
-
-					const data = JSON.parse(res.data)
-					let url = data.data
-					if (!url && data.result) {
-						url = data.result?.url
-					}
-
-					emit('success', file, url)
-				} catch (error) {
-					uploadFile.status = 'error'
-					console.error(error)
-					emit('fail', file, error)
-				}
-
-				uploadingFiles.delete(fileId)
-				resolve()
-			},
-			fail: (error) => {
-				uploadFile.status = 'error'
-				console.error(error)
-				uploadingFiles.delete(fileId)
-				emit('fail', file, error)
-				resolve()
-			}
-		})
-	})
-}
-
-// 删除文件
-const onDelete = (event: any) => {
-	const { index } = event
-	const deletedFile = fileList.value[index]
-
-	fileList.value.splice(index, 1)
-	emitFileChange()
-	emit('delete', deletedFile, index)
-}
-
-// 文件大小超出限制
-const onOversize = (event: any) => {
-	const file = event
-	emit('oversize', file)
-	uni.showToast({
-		title: `文件大小不能超过 ${props.maxSize / 1024 / 1024}MB`,
-		icon: 'none'
-	})
-}
-
-// 生成文件ID
-const generateFileId = (): string => {
-	return Date.now() + '-' + Math.random().toString(36).substr(2, 9)
-}
-
-// 触发文件变化事件
-const emitFileChange = () => {
-	emit('update:modelValue', fileList.value)
-	emit('change', fileList.value)
-}
-
-// 手动上传
-const submit = (): Promise<UploadFile[]> => {
-	return new Promise((resolve) => {
-		const pendingFiles = fileList.value.filter(file => file.status !== 'success')
-
-		if (pendingFiles.length === 0) {
-			resolve(fileList.value)
-			return
-		}
-
-		// 这里可以实现批量上传逻辑
-		Promise.all(pendingFiles.map(file => {
-			// 重新上传逻辑
-			return Promise.resolve(file)
-		})).then(() => {
-			resolve(fileList.value)
-		})
-	})
-}
-
-// 清空文件列表
-const clearFiles = () => {
-	fileList.value = []
-	uploadingFiles.clear()
-	emitFileChange()
-}
-
-// 获取文件列表
-const getFiles = (): UploadFile[] => {
-	return fileList.value
-}
-
-// 隐藏
-const hide = () => {
-	visible.value = false
-}
-
-// 暴露方法给父组件
-defineExpose({
-	submit,
-	clearFiles,
-	getFiles,
-	hide
-})
-</script>
+<template>
+	<view v-if="visible" class="file-upload">
+		<u-upload ref="uploadRef" :max-count="props.maxCount" :max-size="props.maxSize" :size-type="props.sizeType"
+			:source-type="props.sourceType" :deletable="props.deletable" :preview-full-image="props.previewFullImage"
+			:multiple="props.multiple" :disabled="props.disabled" :custom-btn="props.customBtn"
+			:show-progress="props.showProgress" :upload-text="props.uploadText" :width="props.width"
+			:height="props.height" @after-read="onAfterRead" @delete="onDelete" @oversize="onOversize">
+			<!-- 自定义上传按钮 -->
+			<slot></slot>
+		</u-upload>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+
+// 定义类型
+interface UploadFile {
+	url: string
+	name?: string
+	size?: number
+	type?: string
+	progress?: number
+	status?: 'uploading' | 'success' | 'error'
+	response?: any
+}
+
+interface AfterReadFile {
+	name: string
+	size: number
+	thumb: string
+	type: string
+	url: string
+}
+
+interface UploadProps {
+	// 文件列表
+	modelValue?: UploadFile[]
+	// 最大上传数量
+	maxCount?: number
+	// 单个文件大小限制（字节）
+	maxSize?: number
+	// 文件大小选择 ['original', 'compressed']
+	sizeType?: string[]
+	// 文件来源 ['album', 'camera']
+	sourceType?: string[]
+	// 是否显示删除按钮
+	deletable?: boolean
+	// 是否预览完整图片
+	previewFullImage?: boolean
+	// 是否多选
+	multiple?: boolean
+	// 是否禁用
+	disabled?: boolean
+	// 是否使用自定义按钮
+	customBtn?: boolean
+	// 是否显示进度条
+	showProgress?: boolean
+	// 上传文字提示
+	uploadText?: string
+	// 图片宽度
+	width?: number | string
+	// 图片高度
+	height?: number | string
+	// 上传地址
+	action?: string
+	// 上传字段名
+	name?: string
+	// 请求头
+	headers?: Record<string, string>
+	// 附加数据
+	data?: Record<string, any>
+	// 是否自动上传
+	autoUpload?: boolean,
+	// 令牌
+	token?: string
+}
+
+interface UploadEmits {
+	(e: 'update:modelValue', files: UploadFile[]): void
+	(e: 'change', files: UploadFile[]): void
+	(e: 'before', file: UploadFile): void
+	(e: 'success', file: UploadFile, response: any): void
+	(e: 'fail', file: UploadFile, error: any): void
+	(e: 'progress', file: UploadFile, progress: number): void
+	(e: 'delete', file: UploadFile, index: number): void
+	(e: 'oversize', file: UploadFile): void
+}
+
+// Props 和 Emits
+const props = withDefaults(defineProps<UploadProps>(), {
+	modelValue: () => [],
+	maxCount: 9,
+	maxSize: 10 * 1024 * 1024, // 10MB
+	sizeType: () => ['original', 'compressed'],
+	sourceType: () => ['album', 'camera'],
+	deletable: true,
+	previewFullImage: true,
+	multiple: true,
+	disabled: false,
+	customBtn: false,
+	showProgress: true,
+	uploadText: '',
+	width: 50,
+	height: 50,
+	action: '', // https://example.com/file/upload
+	name: 'file',
+	headers: () => ({
+		'Authorization': `Bearer xxx`,
+		'AccessToken': 'xxx',
+		'Content-Type': 'multipart/form-data'
+	}),
+	data: () => ({}),
+	autoUpload: true,
+	token: ''
+})
+
+const emit = defineEmits<UploadEmits>()
+
+// 响应式数据
+const uploadRef = ref()
+const fileList = ref<UploadFile[]>([])
+const uploadingFiles = reactive(new Map<string, UploadFile>())
+const fileMap = ref(new Map<string, any>());
+const visible = ref(true)
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newVal) => {
+	fileList.value = [...newVal]
+}, { immediate: true, deep: true })
+
+// 文件选择后读取
+const onAfterRead = async ({ file }: any) => {
+	const files: AfterReadFile[] = file
+
+	for (const item of files) {
+		// before
+		if (!fileMap.value.has(item.name)) {
+			emit('before', item)
+			fileMap.value.set(item.name, item);
+		}
+
+		const uploadFile: UploadFile = {
+			url: item.url,
+			name: item.name,
+			size: item.size,
+			type: item.type,
+			progress: 0,
+			status: 'uploading'
+		}
+
+		const fileId = generateFileId()
+		uploadingFiles.set(fileId, uploadFile)
+
+		// 添加到文件列表
+		fileList.value.push(uploadFile)
+		emitFileChange()
+
+		if (props.autoUpload) {
+			await uploadFileToServer(item, uploadFile, fileId)
+		} else {
+			uploadFile.status = 'success'
+			uploadingFiles.delete(fileId)
+		}
+	}
+}
+
+// 上传文件到服务器
+const uploadFileToServer = (file: AfterReadFile, uploadFile: UploadFile, fileId: string): Promise<void> => {
+	return new Promise((resolve) => {
+		if (!props.action) {
+			// 如果没有上传地址，直接标记为成功
+			uploadFile.status = 'success'
+			uploadFile.response = { message: 'No upload action provided' }
+			uploadingFiles.delete(fileId)
+			emit('success', file, uploadFile)
+			resolve()
+			return
+		}
+
+		const headers = {
+			'Authorization': `Bearer ${props.token}`,
+			'AccessToken': props.token,
+			// 'Content-Type': 'multipart/form-data' // Commented by Joncky becauce of error "Failed to read the request form. Missing content-type boundary." 
+		}
+
+		uni.uploadFile({
+			url: props.action,
+			filePath: file.url,
+			name: props.name,
+			header: headers,
+			// formData: props.data,
+			success: (res) => {
+				uploadFile.response = res
+
+				try {
+					uploadFile.status = 'success'
+					uploadFile.progress = 100
+
+
+					fileList.value.splice(fileList.value.length - 1, 1, {
+						...file,
+						...res,
+						status: 'success'
+					})
+
+					const data = JSON.parse(res.data)
+					let url = data.data
+					if (!url && data.result) {
+						url = data.result?.url
+					}
+
+					emit('success', file, url)
+				} catch (error) {
+					uploadFile.status = 'error'
+					console.error(error)
+					emit('fail', file, error)
+				}
+
+				uploadingFiles.delete(fileId)
+				resolve()
+			},
+			fail: (error) => {
+				uploadFile.status = 'error'
+				console.error(error)
+				uploadingFiles.delete(fileId)
+				emit('fail', file, error)
+				resolve()
+			}
+		})
+	})
+}
+
+// 删除文件
+const onDelete = (event: any) => {
+	const { index } = event
+	const deletedFile = fileList.value[index]
+
+	fileList.value.splice(index, 1)
+	emitFileChange()
+	emit('delete', deletedFile, index)
+}
+
+// 文件大小超出限制
+const onOversize = (event: any) => {
+	const file = event
+	emit('oversize', file)
+	uni.showToast({
+		title: `文件大小不能超过 ${props.maxSize / 1024 / 1024}MB`,
+		icon: 'none'
+	})
+}
+
+// 生成文件ID
+const generateFileId = (): string => {
+	return Date.now() + '-' + Math.random().toString(36).substr(2, 9)
+}
+
+// 触发文件变化事件
+const emitFileChange = () => {
+	emit('update:modelValue', fileList.value)
+	emit('change', fileList.value)
+}
+
+// 手动上传
+const submit = (): Promise<UploadFile[]> => {
+	return new Promise((resolve) => {
+		const pendingFiles = fileList.value.filter(file => file.status !== 'success')
+
+		if (pendingFiles.length === 0) {
+			resolve(fileList.value)
+			return
+		}
+
+		// 这里可以实现批量上传逻辑
+		Promise.all(pendingFiles.map(file => {
+			// 重新上传逻辑
+			return Promise.resolve(file)
+		})).then(() => {
+			resolve(fileList.value)
+		})
+	})
+}
+
+// 清空文件列表
+const clearFiles = () => {
+	fileList.value = []
+	uploadingFiles.clear()
+	emitFileChange()
+}
+
+// 获取文件列表
+const getFiles = (): UploadFile[] => {
+	return fileList.value
+}
+
+// 隐藏
+const hide = () => {
+	visible.value = false
+}
+
+// 暴露方法给父组件
+defineExpose({
+	submit,
+	clearFiles,
+	getFiles,
+	hide
+})
+</script>