| | |
| | | } else { |
| | | value.push(v); |
| | | } |
| | | const existingMap = new Map<string | number, UploadFile>(); |
| | | for (const f of fileList.value ?? []) { |
| | | const id = (f as any)?.response?.[props.valueKey] ?? (f as any)?.[props.valueKey] ?? f?.uid; |
| | | if (id != null) existingMap.set(id, f); |
| | | } |
| | | fileList.value = value |
| | | .map((item, i) => { |
| | | if (item && isString(item)) { |
| | | return { |
| | | return existingMap.get(item) ?? { |
| | | uid: `${-i}`, |
| | | name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)), |
| | | status: UploadResultStatus.DONE, |
| | | url: item, |
| | | }; |
| | | } else if (item && isObject(item)) { |
| | | return item; |
| | | const key = item[props.valueKey] ?? item.uid; |
| | | return (key != null && existingMap.get(key)) || { ...item, url: String((item as any).url ?? '') }; |
| | | } else if (item && (typeof item === 'number' || typeof item === 'string')) { |
| | | return { |
| | | return existingMap.get(item) ?? { |
| | | uid: `${-i}`, |
| | | name: `文件 ${String(item)}`, |
| | | status: UploadResultStatus.DONE, |
| | | url: item, |
| | | url: String(item), |
| | | response: { [props.valueKey]: item }, |
| | | } as UploadFile; |
| | | } |
| | |
| | | |
| | | /** 处理文件预览 */ |
| | | function handlePreview(file: UploadFile) { |
| | | const url = (file as any)?.url || (file as any)?.response?.url || (file as any)?.response; |
| | | if (!url) { |
| | | message.warning('文件地址不存在,无法预览'); |
| | | return; |
| | | } |
| | | window.open(url, '_blank'); |
| | | emit('preview', file); |
| | | } |
| | | |
| | |
| | | fileList.value?.splice(index!, 1); |
| | | } |
| | | |
| | | const fileUrl = res?.url || res?.data || res; |
| | | const fileUrl = res?.url || res?.data || (typeof res === 'string' ? res : ''); |
| | | uploadList.value.push({ |
| | | name: res?.name || file.name, |
| | | url: fileUrl, |
| | |
| | | :progress="{ showInfo: true }" |
| | | :show-upload-list="{ |
| | | showPreviewIcon: true, |
| | | showRemoveIcon: true, |
| | | showRemoveIcon: !disabled, |
| | | showDownloadIcon, |
| | | }" |
| | | @remove="handleRemove" |
| | | @preview="handlePreview" |
| | | @reject="handleExceed" |
| | | > |
| | | <div v-if="drag" class="upload-drag-area"> |
| | | <div v-if="drag && !disabled" class="upload-drag-area"> |
| | | <p class="ant-upload-drag-icon"> |
| | | <IconifyIcon icon="lucide:cloud-upload" /> |
| | | </p> |
| | |
| | | 支持{{ accept.join('/') }}格式文件,不超过{{ maxSize }}MB |
| | | </p> |
| | | </div> |
| | | <div v-else-if="fileList && fileList.length < maxNumber"> |
| | | <div |
| | | v-else-if="!disabled && fileList && fileList.length < maxNumber" |
| | | > |
| | | <Button> |
| | | <IconifyIcon icon="lucide:cloud-upload" /> |
| | | {{ $t('ui.upload.upload') }} |