refactor: 图片/文件上传都支持拖拽

This commit is contained in:
dap 2025-03-30 12:32:58 +08:00
parent 621f79e7d8
commit b9843c6faf
4 changed files with 17 additions and 8 deletions

View File

@ -17,13 +17,7 @@ import { uploadApi } from '#/api';
import { defaultFileAcceptExts, defaultFilePreview } from './helper'; import { defaultFileAcceptExts, defaultFilePreview } from './helper';
import { useUpload } from './hook'; import { useUpload } from './hook';
interface FileUploadProps extends BaseUploadProps { interface FileUploadProps extends BaseUploadProps {}
/**
* 是否支持拖拽上传
* @default false
*/
enableDragUpload?: boolean;
}
const props = withDefaults(defineProps<FileUploadProps>(), { const props = withDefaults(defineProps<FileUploadProps>(), {
api: () => uploadApi, api: () => uploadApi,
@ -64,6 +58,10 @@ const {
} = useUpload(props, ossIdList); } = useUpload(props, ossIdList);
</script> </script>
<!--
Upload.Dragger只会影响样式
使用普通Upload也是支持拖拽上传的
-->
<template> <template>
<div> <div>
<CurrentUploadComponent <CurrentUploadComponent

View File

@ -41,6 +41,7 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
disabled: false, disabled: false,
listType: 'picture-card', listType: 'picture-card',
helpMessage: true, helpMessage: true,
enableDragUpload: false,
}); });
// ossId // ossId

View File

@ -64,6 +64,11 @@ export interface BaseUploadProps {
* @default false * @default false
*/ */
directory?: boolean; directory?: boolean;
/**
*
* @default false
*/
enableDragUpload?: boolean;
/** /**
* *
* watch * watch

View File

@ -86,7 +86,12 @@ function customAccept(accept: string) {
:max-count="3" :max-count="3"
:enable-drag-upload="true" :enable-drag-upload="true"
/> />
当前绑定值: {{ multipleFileId }} <ImageUpload
class="mt-3"
v-model:value="multipleImageId"
:enable-drag-upload="true"
:max-count="6"
/>
</Card> </Card>
<Card title="禁用上传" size="small"> <Card title="禁用上传" size="small">