diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue index 4532d45c..2cf2023d 100644 --- a/src/components/UploadFile/src/UploadFile.vue +++ b/src/components/UploadFile/src/UploadFile.vue @@ -58,21 +58,16 @@ import { propTypes } from '@/utils/propTypes' import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus' import { isString } from '@/utils/is' -import { useUpload } from '@/components/UploadFile/src/useUpload' +import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload' import { UploadFile } from 'element-plus/es/components/upload/src/upload' -type ResponseFile = { - name: string - url: string -} - defineOptions({ name: 'UploadFile' }) const message = useMessage() // 消息弹窗 const emit = defineEmits(['update:modelValue']) const props = defineProps({ - modelValue: propTypes.oneOfType([Array]).isRequired, + modelValue: propTypes.oneOfType([]).isRequired, fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg'] fileSize: propTypes.number.def(5), // 大小限制(MB) limit: propTypes.number.def(5), // 数量限制 @@ -158,8 +153,6 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => { watch( () => props.modelValue, (val: ResponseFile[]) => { - console.log(val) - if (!val) { fileList.value = [] // fix:处理掉缓存,表单重置后上传组件的内容并没有重置 return diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue index ac0c162d..4769f259 100644 --- a/src/components/UploadFile/src/UploadImg.vue +++ b/src/components/UploadFile/src/UploadImg.vue @@ -118,7 +118,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { // 图片上传成功提示 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { message.success('上传成功') - emit('update:modelValue', res.data) + emit('update:modelValue', res.data.url) } // 图片上传错误提示 diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue index 85da64c0..b959dcff 100644 --- a/src/components/UploadFile/src/UploadImgs.vue +++ b/src/components/UploadFile/src/UploadImgs.vue @@ -51,7 +51,7 @@ import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus' import { ElNotification } from 'element-plus' import { propTypes } from '@/utils/propTypes' -import { useUpload } from '@/components/UploadFile/src/useUpload' +import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload' defineOptions({ name: 'UploadImgs' }) @@ -70,7 +70,7 @@ type FileTypes = | 'image/x-icon' const props = defineProps({ - modelValue: propTypes.oneOfType([String, Array]).isRequired, + modelValue: propTypes.oneOfType([]).isRequired, drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传(默认为 true) disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传(默认为 false) limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传(默认为 5张) @@ -111,7 +111,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => { // 图片上传成功 interface UploadEmits { - (e: 'update:modelValue', value: string[]): void + (e: 'update:modelValue', value: ResponseFile[]): void } const emit = defineEmits() @@ -120,7 +120,7 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { // 删除自身 const index = fileList.value.findIndex((item) => item.response?.data === res.data) fileList.value.splice(index, 1) - uploadList.value.push({ name: res.data, url: res.data }) + uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url }) if (uploadList.value.length == uploadNumber.value) { fileList.value.push(...uploadList.value) uploadList.value = [] @@ -132,22 +132,22 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => { // 监听模型绑定值变动 watch( () => props.modelValue, - (val: string | string[]) => { + (val: ResponseFile[]) => { if (!val) { fileList.value = [] // fix:处理掉缓存,表单重置后上传组件的内容并没有重置 return } - fileList.value = [] // 保障数据为空 - fileList.value.push( - ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url })) - ) + fileList.value = val.map(({ name, url }) => ({ + name: name ?? url.substring(url.lastIndexOf('/') + 1), + url + })) }, { immediate: true, deep: true } ) // 发送图片链接列表更新 const emitUpdateModelValue = () => { - let result: string[] = fileList.value.map((file) => file.url!) + let result: ResponseFile[] = fileList.value.map(({ name, url }) => ({ name, url: url! })) emit('update:modelValue', result) } // 删除图片 @@ -157,7 +157,7 @@ const handleRemove = (uploadFile: UploadFile) => { ) emit( 'update:modelValue', - fileList.value.map((file) => file.url!) + fileList.value.map(({ name, url }) => ({ name, url: url! })) ) } diff --git a/src/components/UploadFile/src/useUpload.ts b/src/components/UploadFile/src/useUpload.ts index d2023ccc..d22240a3 100644 --- a/src/components/UploadFile/src/useUpload.ts +++ b/src/components/UploadFile/src/useUpload.ts @@ -3,6 +3,11 @@ import CryptoJS from 'crypto-js' import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload' import axios from 'axios' +export type ResponseFile = { + name: string + url: string +} + export const useUpload = () => { // 后端上传地址 const uploadUrl = import.meta.env.VITE_UPLOAD_URL