sh-view 2.8.0 → 2.8.2

package/packages/components/sh-upload/index.vue

@@ -1,535 +1,535 @@
-<template>
-	<div class="sh-upload" :class="{ list: !card }">
-		<slot name="head"></slot>
-		<div
-			v-if="!disabled"
-			v-show="fileList.length < limit"
-			class="upload-component"
-			:class="upClass"
-			:style="upStyles"
-			@click="handleClick"
-			@drop.prevent="onDrop"
-			@paste="handlePaste"
-			@dragover.prevent="dragOver = true"
-			@dragleave.prevent="dragOver = false">
-			<input ref="inputRef" type="file" class="sh-upload-input" :multiple="multiple" :webkitdirectory="webkitdirectory" :accept="accept" @change="handleChange" />
-			<slot>
-				<div class="upload-box" :class="{ drag, card }" :style="upStyles">
-					<sh-icon v-if="icon" class="upload-box-icon" :type="icon" :size="iconSize"></sh-icon>
-					<span class="upload-box-text">上传附件</span>
-				</div>
-			</slot>
-		</div>
-		<ul v-if="fileList.length" class="upload-list">
-			<li v-for="(file, index) in fileList" :key="index" class="upload-list-item">
-				<slot name="fileItem" v-bind="file">
-					<div class="upload-list-title" :title="file.name">{{ file.name }}</div>
-					<div v-if="file.status !== 'success'" class="upload-list-progress">
-						<sh-progress v-if="file.showProgress" v-bind="progressConfig(file)"></sh-progress>
-					</div>
-					<div v-else class="upload-list-action">
-						<template v-for="listAct in listActions" :key="listAct.code">
-							<span class="action-item" @click="onActionClick(listAct, file)"><sh-icon :type="listAct.icon" :title="listAct.title" size="18" /></span>
-						</template>
-					</div>
-				</slot>
-			</li>
-		</ul>
-		<slot name="foot"></slot>
-	</div>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
-import ajax from './js/ajax'
-export default defineComponent({
-	name: 'ShUpload',
-	props: {
-		modelValue: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		baseUrl: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [String, Number],
-			default: 80
-		},
-		height: {
-			type: [String, Number],
-			default: 80
-		},
-		limit: {
-			type: Number,
-			default: 1
-		},
-		card: {
-			type: Boolean
-		},
-		drag: {
-			type: Boolean
-		},
-		icon: {
-			type: String,
-			default: 'ios-folder'
-		},
-		iconSize: {
-			type: [Number, String]
-		},
-		params: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		actionList: {
-			type: Array,
-			default() {
-				return ['detail', 'download', 'delete']
-			}
-		},
-		resKey: {
-			type: String,
-			default: 'data'
-		},
-		action: {
-			type: String,
-			default: 'fileservice/v2/upload'
-		},
-		headers: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		maxSize: {
-			type: Number,
-			default: 1024 * 2 // 文件大小限制，单位 kb
-		},
-		accept: {
-			type: String,
-			default: '.doc,.docx,.xls,.xlsx,.txt,.pdf,.jpg,.jpeg,.png,.txt,.7z,.zip,.rar'
-		},
-		name: {
-			type: String,
-			default: 'file'
-		},
-		beforeUpload: {
-			type: Function
-		},
-		webkitdirectory: {
-			type: Boolean,
-			default: false // 是否开启选择文件夹，部分浏览器适用
-		},
-		withCredentials: {
-			type: Boolean,
-			default: false // 支持发送 cookie 凭证信息
-		},
-		paste: {
-			type: Boolean,
-			default: false // 是否支持粘贴上传文件
-		},
-		format: {
-			type: Array,
-			default() {
-				return []
-			}
-		},
-		onFormatError: {
-			type: Function
-		},
-		onExceededSize: {
-			type: Function
-		},
-		onProgress: {
-			type: Function,
-			default() {}
-		},
-		onSuccess: {
-			type: Function,
-			default() {}
-		},
-		onError: {
-			type: Function,
-			default() {}
-		},
-		onRemove: {
-			type: Function,
-			default() {}
-		},
-		onPreview: {
-			type: Function,
-			default() {}
-		},
-		onDownload: {
-			type: Function,
-			default() {}
-		}
-	},
-	emits: ['update:modelValue', 'action'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-
-		const inputRef = ref()
-		const tempIndex = ref(1)
-		const dragOver = ref(false)
-		const fileList = ref([])
-
-		const multiple = computed(() => props.limit > 1)
-		const upStyles = computed(() => {
-			return props.card ? { width: `${props.width}px`, height: `${props.height}px` } : {}
-		})
-		const upClass = computed(() => {
-			return {
-				'sh-upload-list': !props.card,
-				'sh-upload-select': !props.drag,
-				'sh-upload-drag': props.drag,
-				'sh-upload-dragOver': props.drag && dragOver.value
-			}
-		})
-		const fileFormat = computed(() => (props.format.length ? props.format : props.accept.split(',').map(_ => String(_).replace('.', ''))))
-		const listActions = computed(() => {
-			let list = [
-				{ title: '查看文件', icon: 'ios-eye-outline', code: 'detail' },
-				{ title: '下载文件', icon: 'ios-download', code: 'download' }
-			]
-			if (!props.disabled) {
-				list.push({ title: '删除文件', icon: 'ios-trash-outline', code: 'delete' })
-			}
-			return list.filter(item => props.actionList.includes(item.code))
-		})
-
-		const progressConfig = file => {
-			return {
-				textInside: true,
-				strokeWidth: 20,
-				percent: parseInt(file.percentage, 10),
-				status: file.status
-			}
-		}
-		const handleClick = () => {
-			if (props.disabled) return
-			inputRef.value.click()
-		}
-		const handleChange = e => {
-			const files = e.target.files
-			if (!files) return
-			uploadFiles(files)
-			inputRef.value.value = null
-		}
-		const handleStart = file => {
-			file.uid = Date.now() + tempIndex.value++
-			const _file = {
-				status: 'active',
-				name: file.name,
-				size: file.size,
-				percentage: 0,
-				uid: file.uid,
-				showProgress: true
-			}
-			fileList.value.push(_file)
-		}
-		const handlePaste = e => {
-			if (props.disabled) return
-			if (props.paste) {
-				uploadFiles(e.clipboardData.files)
-			}
-		}
-		const handleProgress = (e, file) => {
-			const _file = getFile(file)
-			props.onProgress(e, _file, fileList.value)
-			_file.percentage = e.percent || 0
-		}
-		const handleSuccess = (res, file) => {
-			const _file = getFile(file)
-			if (_file) {
-				_file.status = 'success'
-				_file.response = res
-				emitValue()
-				props.onSuccess(res, _file, fileList.value)
-				setTimeout(() => {
-					_file.showProgress = false
-				}, 1000)
-			}
-		}
-		const handleError = (err, response, file) => {
-			const _file = getFile(file)
-			const fileArray = fileList.value
-			_file.status = 'wrong'
-			fileArray.splice(fileArray.indexOf(_file), 1)
-			props.onError(err, response, file)
-		}
-		const handleRemove = file => {
-			const fileArray = fileList.value
-			fileArray.splice(fileArray.indexOf(file), 1)
-			emitValue()
-			props.onRemove(file, fileArray)
-		}
-		const handlePreview = file => {
-			const fileArray = fileList.value
-			fileArray.splice(fileArray.indexOf(file), 1)
-			props.onRemove(file, fileArray)
-		}
-		const handleDownload = file => {
-			const fileArray = fileList.value
-			fileArray.splice(fileArray.indexOf(file), 1)
-			props.onDownload(file, fileArray)
-		}
-		const onDrop = e => {
-			dragOver.value = false
-			if (props.disabled) return
-			uploadFiles(e.dataTransfer.files)
-		}
-		const uploadFiles = files => {
-			let postFiles = Array.prototype.slice.call(files)
-			if (!multiple.value) postFiles = postFiles.slice(0, 1)
-			if (postFiles.length === 0) return
-			postFiles.forEach(file => {
-				upload(file)
-			})
-		}
-		const upload = file => {
-			if (!props.beforeUpload) {
-				return post(file)
-			}
-			const before = props.beforeUpload(file)
-			if (before && before.then) {
-				before.then(processedFile => {
-					if (Object.prototype.toString.call(processedFile) === '[object File]') {
-						post(processedFile)
-					} else {
-						post(file)
-					}
-				})
-			} else if (before !== false) {
-				post(file)
-			}
-		}
-		const post = async file => {
-			let { headers, name, params, action, withCredentials } = props
-			if (validateFile) {
-				let valResult = validateFile(file)
-				if (!valResult) return
-			}
-			handleStart(file)
-			ajax({
-				headers: headers,
-				withCredentials: withCredentials,
-				file: file,
-				data: params,
-				filename: name,
-				action: action,
-				onProgress: e => {
-					handleProgress(e, file)
-				},
-				onSuccess: res => {
-					handleSuccess(res, file)
-				},
-				onError: (err, response) => {
-					handleError(err, response, file)
-				}
-			})
-		}
-		const getFile = file => {
-			const fileArray = fileList.value
-			let target
-			fileArray.every(item => {
-				target = file.uid === item.uid ? item : null
-				return !target
-			})
-			return target
-		}
-		const clearFiles = () => {
-			fileList.value = []
-			emitValue()
-		}
-		const emitValue = () => {
-			let list = getModelValue ? getModelValue() : fileList.value
-			emit('update:modelValue', list)
-		}
-
-		// 上传校验
-		const validateFile = file => {
-			let { action, maxSize } = props
-			// check format
-			if (fileFormat.value.length) {
-				const _file_format = file.name.split('.').pop().toLocaleLowerCase()
-				const checked = fileFormat.value.some(item => item.toLocaleLowerCase() === _file_format)
-				if (!checked) {
-					let errorMsg = `格式不正确，请上传 ${fileFormat.value.join(' ')} 格式文件`
-					props.onFormatError ? props.onFormatError(file, errorMsg, fileList.value) : proxy.msginfo(errorMsg)
-					return
-				}
-			}
-			// check maxSize
-			if (maxSize && file.size > maxSize * 1024) {
-				let errorMsg = `文件大小不能超过 ${maxSize / 1024} M`
-				props.onExceededSize ? props.onExceededSize(file, errorMsg, fileList.value) : proxy.msginfo(errorMsg)
-				return
-			}
-			if (!action) {
-				proxy.msginfo('上传地址不能为空')
-				return
-			}
-			return true
-		}
-		// 附件操作点击事件
-		const onActionClick = (obj, file) => {
-			if (obj.code === 'delete') {
-				handleRemove(file)
-			} else if (obj.code === 'detail') {
-				handlePreview(file)
-			} else if (obj.code === 'download') {
-				handleDownload(file)
-			}
-			emit('action', obj)
-		}
-		// 获取双向绑定值
-		const getModelValue = () => {
-			return fileList.value.map(item => {
-				let url = $vUtils.get(item, `response.${props.resKey}`)
-				return { name: item.name, url: url }
-			})
-		}
-
-		watch(
-			() => props.modelValue,
-			value => {
-				fileList.value = value
-			},
-			{
-				immediate: true,
-				deep: true
-			}
-		)
-
-		return {
-			inputRef,
-			fileList,
-			upClass,
-			upStyles,
-			dragOver,
-			multiple,
-			listActions,
-			handleClick,
-			handlePaste,
-			handleChange,
-			progressConfig,
-			onDrop,
-			onActionClick
-		}
-	}
-})
-</script>
-
-<style scoped lang="scss">
-.sh-upload {
-	display: inline-block;
-	vertical-align: top;
-	&.list {
-		display: block;
-		width: 100%;
-	}
-	.upload-component {
-		border: 1px solid var(--vxe-table-border-color);
-		background-color: var(--vxe-table-body-background-color);
-		border-radius: var(--vxe-border-radius);
-		cursor: pointer;
-		input[type='file'] {
-			display: none;
-		}
-		.upload-box {
-			display: inline-block;
-			padding: 6px 10px;
-			box-sizing: border-box;
-			.upload-box-icon {
-				margin-right: 5px;
-			}
-			&.card,
-			&.drag {
-				display: inline-flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				.upload-box-icon {
-					margin-bottom: 8px;
-				}
-			}
-			&.drag {
-				min-height: 100px;
-			}
-		}
-		&:hover {
-			border: 1px solid var(--vxe-primary-color);
-		}
-		&.sh-upload-select {
-			display: inline-block;
-			vertical-align: top;
-		}
-		&.sh-upload-drag {
-			text-align: center;
-			cursor: pointer;
-			position: relative;
-			overflow: hidden;
-			&:hover {
-				border: 1px dashed var(--vxe-primary-color);
-			}
-		}
-		&.sh-upload-dragOver {
-			border: 2px dashed var(--vxe-primary-color);
-		}
-	}
-	.upload-list {
-		display: block;
-		.upload-list-item {
-			display: flex;
-			align-items: stretch;
-			border: 1px solid var(--vxe-table-border-color);
-			background-color: var(--vxe-table-body-background-color);
-			position: relative;
-			.upload-list-title {
-				padding: 6px 10px;
-				flex: 1;
-				display: block;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-			.upload-list-action {
-				display: inline-flex;
-				align-items: center;
-				color: var(--vxe-primary-color);
-				.action-item {
-					display: inline-flex;
-					align-items: center;
-					padding: 0 5px;
-					height: 100%;
-					cursor: pointer;
-					&:hover {
-						background-color: var(--vxe-primary-darken-color);
-					}
-				}
-			}
-			.upload-list-progress {
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-}
-</style>
+<template>
+	<div class="sh-upload" :class="{ list: !card }">
+		<slot name="head"></slot>
+		<div
+			v-if="!disabled"
+			v-show="fileList.length < limit"
+			class="upload-component"
+			:class="upClass"
+			:style="upStyles"
+			@click="handleClick"
+			@drop.prevent="onDrop"
+			@paste="handlePaste"
+			@dragover.prevent="dragOver = true"
+			@dragleave.prevent="dragOver = false">
+			<input ref="inputRef" type="file" class="sh-upload-input" :multiple="multiple" :webkitdirectory="webkitdirectory" :accept="accept" @change="handleChange" />
+			<slot>
+				<div class="upload-box" :class="{ drag, card }" :style="upStyles">
+					<sh-icon v-if="icon" class="upload-box-icon" :type="icon" :size="iconSize"></sh-icon>
+					<span class="upload-box-text">上传附件</span>
+				</div>
+			</slot>
+		</div>
+		<ul v-if="fileList.length" class="upload-list">
+			<li v-for="(file, index) in fileList" :key="index" class="upload-list-item">
+				<slot name="fileItem" v-bind="file">
+					<div class="upload-list-title" :title="file.name">{{ file.name }}</div>
+					<div v-if="file.status !== 'success'" class="upload-list-progress">
+						<sh-progress v-if="file.showProgress" v-bind="progressConfig(file)"></sh-progress>
+					</div>
+					<div v-else class="upload-list-action">
+						<template v-for="listAct in listActions" :key="listAct.code">
+							<span class="action-item" @click="onActionClick(listAct, file)"><sh-icon :type="listAct.icon" :title="listAct.title" size="18" /></span>
+						</template>
+					</div>
+				</slot>
+			</li>
+		</ul>
+		<slot name="foot"></slot>
+	</div>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onBeforeMount } from 'vue'
+import ajax from './js/ajax'
+export default defineComponent({
+	name: 'ShUpload',
+	props: {
+		modelValue: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		baseUrl: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [String, Number],
+			default: 80
+		},
+		height: {
+			type: [String, Number],
+			default: 80
+		},
+		limit: {
+			type: Number,
+			default: 1
+		},
+		card: {
+			type: Boolean
+		},
+		drag: {
+			type: Boolean
+		},
+		icon: {
+			type: String,
+			default: 'ios-folder'
+		},
+		iconSize: {
+			type: [Number, String]
+		},
+		params: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		actionList: {
+			type: Array,
+			default() {
+				return ['detail', 'download', 'delete']
+			}
+		},
+		resKey: {
+			type: String,
+			default: 'data'
+		},
+		action: {
+			type: String,
+			default: 'fileservice/v2/upload'
+		},
+		headers: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxSize: {
+			type: Number,
+			default: 1024 * 2 // 文件大小限制，单位 kb
+		},
+		accept: {
+			type: String,
+			default: '.doc,.docx,.xls,.xlsx,.txt,.pdf,.jpg,.jpeg,.png,.txt,.7z,.zip,.rar'
+		},
+		name: {
+			type: String,
+			default: 'file'
+		},
+		beforeUpload: {
+			type: Function
+		},
+		webkitdirectory: {
+			type: Boolean,
+			default: false // 是否开启选择文件夹，部分浏览器适用
+		},
+		withCredentials: {
+			type: Boolean,
+			default: false // 支持发送 cookie 凭证信息
+		},
+		paste: {
+			type: Boolean,
+			default: false // 是否支持粘贴上传文件
+		},
+		format: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		onFormatError: {
+			type: Function
+		},
+		onExceededSize: {
+			type: Function
+		},
+		onProgress: {
+			type: Function,
+			default() {}
+		},
+		onSuccess: {
+			type: Function,
+			default() {}
+		},
+		onError: {
+			type: Function,
+			default() {}
+		},
+		onRemove: {
+			type: Function,
+			default() {}
+		},
+		onPreview: {
+			type: Function,
+			default() {}
+		},
+		onDownload: {
+			type: Function,
+			default() {}
+		}
+	},
+	emits: ['update:modelValue', 'action'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const inputRef = ref()
+		const tempIndex = ref(1)
+		const dragOver = ref(false)
+		const fileList = ref([])
+
+		const multiple = computed(() => props.limit > 1)
+		const upStyles = computed(() => {
+			return props.card ? { width: `${props.width}px`, height: `${props.height}px` } : {}
+		})
+		const upClass = computed(() => {
+			return {
+				'sh-upload-list': !props.card,
+				'sh-upload-select': !props.drag,
+				'sh-upload-drag': props.drag,
+				'sh-upload-dragOver': props.drag && dragOver.value
+			}
+		})
+		const fileFormat = computed(() => (props.format.length ? props.format : props.accept.split(',').map(_ => String(_).replace('.', ''))))
+		const listActions = computed(() => {
+			let list = [
+				{ title: '查看文件', icon: 'ios-eye-outline', code: 'detail' },
+				{ title: '下载文件', icon: 'ios-download', code: 'download' }
+			]
+			if (!props.disabled) {
+				list.push({ title: '删除文件', icon: 'ios-trash-outline', code: 'delete' })
+			}
+			return list.filter(item => props.actionList.includes(item.code))
+		})
+
+		const progressConfig = file => {
+			return {
+				textInside: true,
+				strokeWidth: 20,
+				percent: parseInt(file.percentage, 10),
+				status: file.status
+			}
+		}
+		const handleClick = () => {
+			if (props.disabled) return
+			inputRef.value.click()
+		}
+		const handleChange = e => {
+			const files = e.target.files
+			if (!files) return
+			uploadFiles(files)
+			inputRef.value.value = null
+		}
+		const handleStart = file => {
+			file.uid = Date.now() + tempIndex.value++
+			const _file = {
+				status: 'active',
+				name: file.name,
+				size: file.size,
+				percentage: 0,
+				uid: file.uid,
+				showProgress: true
+			}
+			fileList.value.push(_file)
+		}
+		const handlePaste = e => {
+			if (props.disabled) return
+			if (props.paste) {
+				uploadFiles(e.clipboardData.files)
+			}
+		}
+		const handleProgress = (e, file) => {
+			const _file = getFile(file)
+			props.onProgress(e, _file, fileList.value)
+			_file.percentage = e.percent || 0
+		}
+		const handleSuccess = (res, file) => {
+			const _file = getFile(file)
+			if (_file) {
+				_file.status = 'success'
+				_file.response = res
+				emitValue()
+				props.onSuccess(res, _file, fileList.value)
+				setTimeout(() => {
+					_file.showProgress = false
+				}, 1000)
+			}
+		}
+		const handleError = (err, response, file) => {
+			const _file = getFile(file)
+			const fileArray = fileList.value
+			_file.status = 'wrong'
+			fileArray.splice(fileArray.indexOf(_file), 1)
+			props.onError(err, response, file)
+		}
+		const handleRemove = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			emitValue()
+			props.onRemove(file, fileArray)
+		}
+		const handlePreview = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			props.onRemove(file, fileArray)
+		}
+		const handleDownload = file => {
+			const fileArray = fileList.value
+			fileArray.splice(fileArray.indexOf(file), 1)
+			props.onDownload(file, fileArray)
+		}
+		const onDrop = e => {
+			dragOver.value = false
+			if (props.disabled) return
+			uploadFiles(e.dataTransfer.files)
+		}
+		const uploadFiles = files => {
+			let postFiles = Array.prototype.slice.call(files)
+			if (!multiple.value) postFiles = postFiles.slice(0, 1)
+			if (postFiles.length === 0) return
+			postFiles.forEach(file => {
+				upload(file)
+			})
+		}
+		const upload = file => {
+			if (!props.beforeUpload) {
+				return post(file)
+			}
+			const before = props.beforeUpload(file)
+			if (before && before.then) {
+				before.then(processedFile => {
+					if (Object.prototype.toString.call(processedFile) === '[object File]') {
+						post(processedFile)
+					} else {
+						post(file)
+					}
+				})
+			} else if (before !== false) {
+				post(file)
+			}
+		}
+		const post = async file => {
+			let { headers, name, params, action, withCredentials } = props
+			if (validateFile) {
+				let valResult = validateFile(file)
+				if (!valResult) return
+			}
+			handleStart(file)
+			ajax({
+				headers: headers,
+				withCredentials: withCredentials,
+				file: file,
+				data: params,
+				filename: name,
+				action: action,
+				onProgress: e => {
+					handleProgress(e, file)
+				},
+				onSuccess: res => {
+					handleSuccess(res, file)
+				},
+				onError: (err, response) => {
+					handleError(err, response, file)
+				}
+			})
+		}
+		const getFile = file => {
+			const fileArray = fileList.value
+			let target
+			fileArray.every(item => {
+				target = file.uid === item.uid ? item : null
+				return !target
+			})
+			return target
+		}
+		const clearFiles = () => {
+			fileList.value = []
+			emitValue()
+		}
+		const emitValue = () => {
+			let list = getModelValue ? getModelValue() : fileList.value
+			emit('update:modelValue', list)
+		}
+
+		// 上传校验
+		const validateFile = file => {
+			let { action, maxSize } = props
+			// check format
+			if (fileFormat.value.length) {
+				const _file_format = file.name.split('.').pop().toLocaleLowerCase()
+				const checked = fileFormat.value.some(item => item.toLocaleLowerCase() === _file_format)
+				if (!checked) {
+					let errorMsg = `格式不正确，请上传 ${fileFormat.value.join(' ')} 格式文件`
+					props.onFormatError ? props.onFormatError(file, errorMsg, fileList.value) : proxy.msginfo(errorMsg)
+					return
+				}
+			}
+			// check maxSize
+			if (maxSize && file.size > maxSize * 1024) {
+				let errorMsg = `文件大小不能超过 ${maxSize / 1024} M`
+				props.onExceededSize ? props.onExceededSize(file, errorMsg, fileList.value) : proxy.msginfo(errorMsg)
+				return
+			}
+			if (!action) {
+				proxy.msginfo('上传地址不能为空')
+				return
+			}
+			return true
+		}
+		// 附件操作点击事件
+		const onActionClick = (obj, file) => {
+			if (obj.code === 'delete') {
+				handleRemove(file)
+			} else if (obj.code === 'detail') {
+				handlePreview(file)
+			} else if (obj.code === 'download') {
+				handleDownload(file)
+			}
+			emit('action', obj)
+		}
+		// 获取双向绑定值
+		const getModelValue = () => {
+			return fileList.value.map(item => {
+				let url = $vUtils.get(item, `response.${props.resKey}`)
+				return { name: item.name, url: url }
+			})
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				fileList.value = value
+			},
+			{
+				immediate: true,
+				deep: true
+			}
+		)
+
+		return {
+			inputRef,
+			fileList,
+			upClass,
+			upStyles,
+			dragOver,
+			multiple,
+			listActions,
+			handleClick,
+			handlePaste,
+			handleChange,
+			progressConfig,
+			onDrop,
+			onActionClick
+		}
+	}
+})
+</script>
+
+<style scoped lang="scss">
+.sh-upload {
+	display: inline-block;
+	vertical-align: top;
+	&.list {
+		display: block;
+		width: 100%;
+	}
+	.upload-component {
+		border: 1px solid var(--vxe-table-border-color);
+		background-color: var(--vxe-table-body-background-color);
+		border-radius: var(--vxe-border-radius);
+		cursor: pointer;
+		input[type='file'] {
+			display: none;
+		}
+		.upload-box {
+			display: inline-block;
+			padding: 6px 10px;
+			box-sizing: border-box;
+			.upload-box-icon {
+				margin-right: 5px;
+			}
+			&.card,
+			&.drag {
+				display: inline-flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.upload-box-icon {
+					margin-bottom: 8px;
+				}
+			}
+			&.drag {
+				min-height: 100px;
+			}
+		}
+		&:hover {
+			border: 1px solid var(--vxe-primary-color);
+		}
+		&.sh-upload-select {
+			display: inline-block;
+			vertical-align: top;
+		}
+		&.sh-upload-drag {
+			text-align: center;
+			cursor: pointer;
+			position: relative;
+			overflow: hidden;
+			&:hover {
+				border: 1px dashed var(--vxe-primary-color);
+			}
+		}
+		&.sh-upload-dragOver {
+			border: 2px dashed var(--vxe-primary-color);
+		}
+	}
+	.upload-list {
+		display: block;
+		.upload-list-item {
+			display: flex;
+			align-items: stretch;
+			border: 1px solid var(--vxe-table-border-color);
+			background-color: var(--vxe-table-body-background-color);
+			position: relative;
+			.upload-list-title {
+				padding: 6px 10px;
+				flex: 1;
+				display: block;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+			.upload-list-action {
+				display: inline-flex;
+				align-items: center;
+				color: var(--vxe-primary-color);
+				.action-item {
+					display: inline-flex;
+					align-items: center;
+					padding: 0 5px;
+					height: 100%;
+					cursor: pointer;
+					&:hover {
+						background-color: var(--vxe-primary-darken-color);
+					}
+				}
+			}
+			.upload-list-progress {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+}
+</style>