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

View File

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

View File

@@ -64,6 +64,11 @@ export interface BaseUploadProps {
* @default false
*/
directory?: boolean;
/**
* 是否支持拖拽上传
* @default false
*/
enableDragUpload?: boolean;
/**
* 是否开启深度监听
* 默认外部的数组地址重新改变才会触发watch 不会监听内部元素的变化

View File

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