feat: file upload

apps/web-antd/src/views/system/oss/file-upload-modal.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert } from 'ant-design-vue';
+
+import { FileUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+
+const accept = ref(['txt', 'excel', 'word', 'pdf']);
+const maxNumber = ref(3);
+
+const message = computed(() => {
+  return `支持 [${accept.value.join(', ')}] 格式，最多上传 ${maxNumber.value} 个文件`;
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="文件上传"
+  >
+    <div class="flex flex-col gap-4">
+      <Alert :message="message" show-icon type="info">aaa</Alert>
+      <FileUpload
+        v-model:value="fileList"
+        :accept="accept"
+        :max-number="maxNumber"
+      />
+    </div>
+  </BasicModal>
+</template>

apps/web-antd/src/views/system/oss/index.vue

@@ -26,6 +26,7 @@ import { ossDownload, ossList, ossRemove } from '#/api/system/oss';
 import { downloadByData } from '#/utils/file/download';
 
 import { columns, querySchema } from './data';
+import fileUploadModal from './file-upload-modal.vue';
 import imageUploadModal from './image-upload-modal.vue';
 
 const formOptions: VbenFormProps = {
@@ -157,6 +158,10 @@ function isImageFile(ext: string) {
 const [ImageUploadModal, imageUploadApi] = useVbenModal({
   connectedComponent: imageUploadModal,
 });
+
+const [FileUploadModal, fileUploadApi] = useVbenModal({
+  connectedComponent: fileUploadModal,
+});
 </script>
 
 <template>
@@ -185,6 +190,12 @@ const [ImageUploadModal, imageUploadApi] = useVbenModal({
           >
             {{ $t('pages.common.delete') }}
           </a-button>
+          <a-button
+            v-access:code="['system:oss:upload']"
+            @click="fileUploadApi.open"
+          >
+            文件上传
+          </a-button>
           <a-button
             v-access:code="['system:oss:upload']"
             @click="imageUploadApi.open"
@@ -227,5 +238,6 @@ const [ImageUploadModal, imageUploadApi] = useVbenModal({
       </template>
     </BasicTable>
     <ImageUploadModal @reload="tableApi.query" />
+    <FileUploadModal @reload="tableApi.query" />
   </Page>
 </template>

apps/web-antd/src/views/演示使用自行删除/upload/index.vue

@@ -3,27 +3,46 @@ import { ref } from 'vue';
 
 import { JsonPreview, Page } from '@vben/common-ui';
 
-import { RadioGroup } from 'ant-design-vue';
+import { Alert, RadioGroup } from 'ant-design-vue';
 
-import { ImageUpload } from '#/components/upload';
+import { FileUpload, ImageUpload } from '#/components/upload';
 
 const resultField = ref<'ossId' | 'url'>('ossId');
 
+const imageList = ref([]);
 const fileList = ref([]);
 const fieldOptions = [
   { label: 'ossId', value: 'ossId' },
   { label: '链接地址', value: 'url' },
 ];
+const fileAccept = ['txt', 'excel', 'word', 'pdf'];
 </script>
 
 <template>
-  <Page class="flex flex-col gap-[8px]">
+  <Page content-class="flex flex-col gap-[12px]">
     <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
       <div class="flex gap-[8px]">
         <span>返回字段: </span>
         <RadioGroup v-model:value="resultField" :options="fieldOptions" />
       </div>
-      <ImageUpload v-model:value="fileList" :result-field="resultField" />
+      <ImageUpload v-model:value="imageList" :result-field="resultField" />
+      <JsonPreview :data="imageList" />
+    </div>
+    <div class="bg-background flex flex-col gap-[12px] rounded-lg p-6">
+      <div class="flex gap-[8px]">
+        <span>返回字段: </span>
+        <RadioGroup v-model:value="resultField" :options="fieldOptions" />
+      </div>
+      <Alert
+        :message="`支持的文件类型：${fileAccept.join(', ')}`"
+        :show-icon="true"
+        type="info"
+      />
+      <FileUpload
+        v-model:value="fileList"
+        :accept="fileAccept"
+        :result-field="resultField"
+      />
       <JsonPreview :data="fileList" />
     </div>
   </Page>