diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue index 7bfe90232..5f8c3e5e6 100644 --- a/src/components/UploadFile/src/UploadImg.vue +++ b/src/components/UploadFile/src/UploadImg.vue @@ -71,25 +71,44 @@ type FileTypes = // 接受父组件参数 const props = defineProps({ modelValue: propTypes.string.def(''), - drag: propTypes.bool.def(true), - disabled: propTypes.bool.def(false), - fileSize: propTypes.number.def(5), - fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), - height: propTypes.string.def('150px'), - width: propTypes.string.def('150px'), - borderradius: propTypes.string.def('8px'), - showDelete: propTypes.bool.def(true), - showBtnText: propTypes.bool.def(true), - // 新增压缩相关属性 + drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传(默认为 true) + disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传(默认为 false) + fileSize: propTypes.number.def(5), // 图片大小限制 ==> 非必传(默认为 5M) + fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传(默认为 ["image/jpeg", "image/png", "image/gif"]) + height: propTypes.string.def('150px'), // 组件高度 ==> 非必传(默认为 150px) + width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传(默认为 150px) + borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传(默认为 8px) + showDelete: propTypes.bool.def(true), // 是否显示删除按钮 + showBtnText: propTypes.bool.def(true), // 是否显示按钮文字 + // 新增压缩相关属性 enableCompress: propTypes.bool.def(false), // 是否启用压缩 - compressSize: propTypes.number.def(200), // 压缩后的大小限制,单位KB + compressSize: propTypes.number.def(300), // 压缩后的大小限制,单位KB compressQuality: propTypes.number.def(0.8) // 压缩质量,0-1之间 }) - -const { t } = useI18n() -const message = useMessage() +const { t } = useI18n() // 国际化 +const message = useMessage() // 消息弹窗 +// 生成组件唯一id const uuid = ref('id-' + generateUUID()) +// 查看图片 +const imagePreview = (imgUrl: string) => { + createImageViewer({ + zIndex: 9999999, + urlList: [imgUrl] + }) +} +const emit = defineEmits(['update:modelValue']) + +const deleteImg = () => { + emit('update:modelValue', '') +} + +const { uploadUrl, httpRequest } = useUpload() + +const editImg = () => { + const dom = document.querySelector(`#${uuid.value} .el-upload__input`) + dom && dom.dispatchEvent(new MouseEvent('click')) +} // 压缩图片方法 const compressImage = (file: File): Promise => { return new Promise((resolve, reject) => { @@ -138,27 +157,6 @@ const compressImage = (file: File): Promise => { reader.onerror = () => reject(new Error('Failed to read file')) }) } - -const imagePreview = (imgUrl: string) => { - createImageViewer({ - zIndex: 9999999, - urlList: [imgUrl] - }) -} - -const emit = defineEmits(['update:modelValue']) - -const deleteImg = () => { - emit('update:modelValue', '') -} - -const { uploadUrl, httpRequest } = useUpload() - -const editImg = () => { - const dom = document.querySelector(`#${uuid.value} .el-upload__input`) - dom && dom.dispatchEvent(new MouseEvent('click')) -} - // 修改上传前的处理方法 const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => { // 检查文件类型 @@ -180,7 +178,7 @@ const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => { const compressedBlob = await compressImage(rawFile) // 如果压缩后仍然超过限制 if (compressedBlob.size > props.compressSize * 1024) { - message.notifyWarning(`压缩后图片仍然超过 ${props.compressSize}KB,请选择更小的图片!`) + message.notifyWarning(`压缩后图片${compressedBlob.size/1024}KB仍然超过 ${props.compressSize}KB,请选择更小的图片!`) return false } // 创建新的文件对象 @@ -195,16 +193,17 @@ const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => { return true } +// 图片上传成功提示 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { message.success('上传成功') emit('update:modelValue', res.data) } +// 图片上传错误提示 const uploadError = () => { message.notifyError('图片上传失败,请您重新上传!') } -