feat: 上传list-type

This commit is contained in:
dap
2025-03-30 18:23:37 +08:00
parent a302fdf119
commit 755a30583f
4 changed files with 96 additions and 5 deletions

View File

@@ -3,6 +3,8 @@
去除使用`file-type`库进行文件类型检测 在Safari无法使用
-->
<script setup lang="ts">
import type { UploadListType } from 'ant-design-vue/es/upload/interface';
import type { BaseUploadProps, UploadEmits } from './props';
import { computed } from 'vue';
@@ -17,7 +19,14 @@ import { uploadApi } from '#/api';
import { defaultFileAcceptExts, defaultFilePreview } from './helper';
import { useUpload } from './hook';
interface FileUploadProps extends BaseUploadProps {}
interface FileUploadProps extends BaseUploadProps {
/**
* 同antdv的listType 但是排除picture-card
* 文件上传不适合用picture-card显示
* @default text
*/
listType?: Exclude<UploadListType, 'picture-card'>;
}
const props = withDefaults(defineProps<FileUploadProps>(), {
api: () => uploadApi,
@@ -34,6 +43,7 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
enableDragUpload: false,
directory: false,
abortOnUnmounted: true,
listType: 'text',
});
const emit = defineEmits<UploadEmits>();
@@ -70,6 +80,7 @@ Upload.Dragger只会影响样式
<CurrentUploadComponent
v-model:file-list="innerFileList"
:accept="accept"
:list-type="listType"
:disabled="disabled"
:directory="directory"
:max-count="maxCount"

View File

@@ -12,7 +12,7 @@ import type { BaseUploadProps, UploadEmits } from './props';
import { $t, I18nT } from '@vben/locales';
import { PlusOutlined } from '@ant-design/icons-vue';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { Image, ImagePreviewGroup, Upload } from 'ant-design-vue';
import { isFunction } from 'lodash-es';
@@ -91,10 +91,19 @@ function currentPreview(file: UploadFile) {
@change="handleChange"
@remove="handleRemove"
>
<div v-if="innerFileList?.length < maxCount">
<div
v-if="innerFileList?.length < maxCount && listType === 'picture-card'"
>
<PlusOutlined />
<div class="mt-[8px]">{{ $t('component.upload.upload') }}</div>
</div>
<a-button
v-if="innerFileList?.length < maxCount && listType !== 'picture-card'"
:disabled="disabled"
>
<UploadOutlined />
{{ $t('component.upload.upload') }}
</a-button>
</Upload>
<slot name="helpMessage" v-bind="{ maxCount, disabled, maxSize, accept }">
<I18nT
@@ -102,7 +111,10 @@ function currentPreview(file: UploadFile) {
scope="global"
keypath="component.upload.uploadHelpMessage"
tag="div"
:class="{ 'upload-text__disabled': disabled }"
:class="{
'upload-text__disabled': disabled,
'mt-2': listType !== 'picture-card',
}"
>
<template #size>
<span