feat: upload-demo.vue

2024-12-16 00:21:03 +08:00
parent 86d0e5622d
commit abe0262130
11 changed files with 325 additions and 103 deletions
--- a/fake/upload.fake.ts
+++ b/fake/upload.fake.ts
@ -0,0 +1,24 @@
+// fake/user.fake.ts
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+
+let fail = !false;
+export default defineFakeRoute([
+  {
+    timeout: 2000,
+    method: 'POST',
+    url: '/fake/upload',
+    response: (_, __, res) => {
+      fail = !fail;
+      if (fail) {
+        res.statusCode = 500;
+        return {
+          error: 'Upload failed',
+        };
+      }
+
+      return {
+        url: 'https://picsum.photos/200/300',
+      };
+    },
+  },
+]);
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -3,7 +3,7 @@
 #app {
  max-width: 1280px;
  margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
  font-weight: normal;
 }

--- a/src/assets/reset-primevue.css
+++ b/src/assets/reset-primevue.css
@ -12,3 +12,15 @@
  font-size: var(--p-floatlabel-active-font-size);
  font-weight: var(--p-floatlabel-label-active-font-weight);
 }
+
+.p-fileupload-header {
+  flex-wrap: wrap;
+}
+
+.p-fileupload-file-name {
+  word-break: break-all;
+}
+
+.p-fileupload-content .p-progressbar {
+  --p-fileupload-progressbar-height: 1rem;
+}
--- a/src/components/primevue/__dialog-content.vue
+++ b/src/components/primevue/__dialog-content.vue
--- a/src/components/primevue/fns.tsx
+++ b/src/components/primevue/fns.tsx
@ -0,0 +1,79 @@
+import { ConfirmationService, DialogService, ToastService, useDialogRef } from '@/plugins/primevue';
+import dialogContent from './__dialog-content.vue';
+
+const dynamicComponent = defineComponent({
+  props: {
+    'defining-props': {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
+  },
+  setup(props, ctx) {
+    const dialogRef = useDialogRef();
+    return () => (
+      <div>
+        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
+        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
+        <div>PrimeVue DynamicDialog</div> <hr />
+        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
+        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
+      </div>
+    );
+  },
+});
+
+// https://primevue.org/dynamicdialog/
+export const openDialog = async () => {
+  const dialog1 = DialogService.open(dynamicComponent, {
+    props: {
+      header: '对话框1 可以拖动',
+      position: 'bottomleft',
+      draggable: true,
+      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
+    },
+    data: {
+      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
+    },
+    emits: {
+      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
+      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
+      'defining-props': {
+        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
+      },
+      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
+      onClose: () => dialog1.close(),
+    },
+  });
+
+  await nextTick();
+  // if ($__DEV__) return;
+
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  DialogService.open(dialogContent, {
+    props: {
+      header: '对话框2',
+      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
+    },
+  });
+};
+
+export const openToast = () => {
+  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
+  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 0 });
+};
+
+export const openConfirm = async () => {
+  ConfirmationService.require({
+    message: '确定要继续吗？',
+    header: '确认',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: { label: '取消', severity: 'secondary', outlined: true },
+    acceptProps: { label: '确定' },
+    accept: () => {
+      ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
+    },
+    reject: () => {
+      ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
+    },
+  });
+};
--- a/src/components/primevue/primevue.vue
+++ b/src/components/primevue/primevue.vue
@ -1,91 +1,11 @@
 <script lang="ts"></script>

 <script setup lang="tsx">
-import { ConfirmationService, DialogService, ToastService, useDialogRef } from '@/plugins/primevue';
-import dialogContent from './dialog-content.vue';
-
-const dynamicComponent = defineComponent({
-  props: {
-    'defining-props': {
-      type: Object as PropType<Record<string, unknown>>,
-      default: () => ({}),
-    },
-  },
-  setup(props, ctx) {
-    const dialogRef = useDialogRef();
-    return () => (
-      <div>
-        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
-        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
-        <div>PrimeVue DynamicDialog</div> <hr />
-        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
-        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
-      </div>
-    );
-  },
-});
-
-// https://primevue.org/dynamicdialog/
-const openDialog = async () => {
-  const dialog1 = DialogService.open(dynamicComponent, {
-    props: {
-      header: '对话框1 可以拖动',
-      position: 'bottomleft',
-      draggable: true,
-      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
-    },
-    data: {
-      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
-    },
-    emits: {
-      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
-      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
-      'defining-props': {
-        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
-      },
-      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
-      onClose: () => dialog1.close(),
-    },
-  });
-
-  await nextTick();
-  // if ($__DEV__) return;
-
-  await new Promise((resolve) => setTimeout(resolve, 300));
-  DialogService.open(dialogContent, {
-    props: {
-      header: '对话框2',
-      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
-    },
-  });
-};
-const openToast = () => {
-  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
-  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 0 });
-};
-const openConfirm = async () => {
-  ConfirmationService.require({
-    message: '确定要继续吗？',
-    header: '确认',
-    icon: 'pi pi-exclamation-triangle',
-    rejectProps: { label: '取消', severity: 'secondary', outlined: true },
-    acceptProps: { label: '确定' },
-    accept: () => {
-      ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
-    },
-    reject: () => {
-      ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
-    },
-  });
-};
-
-const onAdvancedUpload = () => {
-  ToastService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
-};
+import { openConfirm, openDialog, openToast } from './fns';
 </script>

 <template>
-  <div class="primevue p-4 flex flex-wrap gap-6">
+  <div class="primevue py-4 flex items-start flex-wrap gap-6">
    <FloatLabel>
      <InputText default-value="DEFAULT_VALUE" id="username" />
      <label for="username">Username</label>
@ -106,19 +26,13 @@ const onAdvancedUpload = () => {
      <label>SELECT</label>
    </FloatLabel>

+    <FloatLabel w-full>
+      <UploadDemo />
+      <label>FileUpload</label>
+    </FloatLabel>
+
    <FloatLabel>
-      <FileUpload
-        name="demo[]"
-        url="/api/upload"
-        @upload="onAdvancedUpload()"
-        :multiple="true"
-        accept="image/*"
-        :maxFileSize="1000000"
-      >
-        <template #empty>
-          <span>Drag and drop files to here to upload.</span>
-        </template>
-      </FileUpload>
+      <FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
      <label>FileUpload</label>
    </FloatLabel>

--- a/src/components/primevue/upload-demo.vue
+++ b/src/components/primevue/upload-demo.vue
@ -0,0 +1,178 @@
+<script lang="ts">
+import type { FileUploadState, FileUploadUploaderEvent } from 'primevue/fileupload';
+interface FileExt extends File {
+  objectURL: string;
+}
+
+interface FileUploadInst extends FileUploadState {
+  uploadedFiles: {
+    rawFile: FileExt;
+    name: string;
+    url: string;
+    status: 'uploading' | 'uploaded' | 'failed';
+    progress: number;
+  }[];
+  files: FileExt[];
+}
+</script>
+
+<script setup lang="ts">
+import TimesIcon from '@primevue/icons/times';
+import axios from 'axios';
+// https://primevue.org/toast/#headless
+
+const fileUploadRef = useTemplateRef<FileUploadInst>('fileUploadRef');
+
+const onUploader = (event: FileUploadUploaderEvent) => {
+  console.debug(`event.files :>> `, event.files);
+  const files = event.files as FileExt[];
+  // console.debug(`fileUploadRef.value :>> `, fileUploadRef.value);
+  // console.debug(`fileUploadRef.value!.uploadedFileCount :>> `, fileUploadRef.value!.uploadedFileCount);
+  // console.debug(`fileUploadRef.value!.uploadedFiles :>> `, fileUploadRef.value!.uploadedFiles);
+  // console.debug(`fileUploadRef.value!.files :>> `, fileUploadRef.value!.files);
+  // console.debug(`fileUploadRef.value!.hasFiles :>> `, fileUploadRef.value!.hasFiles);
+
+  for (const file of files) {
+    fileUploadRef.value!.uploadedFiles.push({
+      rawFile: file,
+      name: file.name,
+      url: '',
+      status: 'uploading',
+      progress: 0,
+    });
+    const formData = new FormData();
+    formData.append('file', file);
+    axios
+      .post('/fake-api/fake/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (e) => {
+          const progress = Math.round((e.loaded * 100) / (e.total || 1));
+          console.debug(`progress :>> `, progress);
+          const item = fileUploadRef.value!.uploadedFiles.find((f) => f.rawFile === file);
+          if (item) {
+            item.progress = progress;
+          }
+        },
+      })
+      .then((res) => {
+        const item = fileUploadRef.value!.uploadedFiles.find((f) => f.rawFile === file);
+        if (item) {
+          item.status = 'uploaded';
+          item.url = res.data.url;
+        }
+      })
+      .catch((err) => {
+        console.error(`err :>> `, err);
+        const item = fileUploadRef.value!.uploadedFiles.find((f) => f.rawFile === file);
+        if (item) {
+          item.status = 'failed';
+        }
+      });
+  }
+};
+
+// https://github.com/primefaces/primevue/issues/4722#issuecomment-2241581616
+// const fileObjectURL = (file: File) => window.URL.createObjectURL(file);
+
+// const TemplateFoo = createReusableTemplate<{ msg: string }>();
+
+const uploadedFiles = computed(() => fileUploadRef.value?.uploadedFiles || []);
+const files = computed(() => fileUploadRef.value?.files || []);
+
+const showUploadButton = computed(() => {
+  if (fileUploadRef.value?.files?.length) {
+    return true;
+  }
+  return false;
+});
+
+const disabled = computed(() => {
+  if (fileUploadRef.value?.uploadedFiles?.some((f) => f.status === 'failed')) {
+    return true;
+  }
+  return false;
+});
+</script>
+
+<template>
+  <FileUpload
+    ref="fileUploadRef"
+    :auto="true"
+    :disabled="disabled"
+    :showUploadButton="showUploadButton"
+    :showCancelButton="false"
+    customUpload
+    mode="advanced"
+    :multiple="true"
+    accept="image/*"
+    :maxFileSize="1000000 * 1"
+    invalidFileSizeMessage="文件 {0} 大小超过限制 {1}"
+    :fileLimit="2"
+    invalidFileLimitMessage="最多只能上传 {0} 个文件，请移除多余文件后点击上传"
+    @uploader="onUploader"
+    :chooseButtonProps="{ size: 'small' }"
+    :uploadButtonProps="{ size: 'small', severity: 'secondary' }"
+    :cancelButtonProps="{ size: 'small', severity: 'secondary' }"
+  >
+    <template #empty>
+      <Message size="small" severity="info">请上传图片</Message>
+    </template>
+    <template #content="{ messages, removeFileCallback, removeUploadedFileCallback }">
+      <!-- slotProps.removeFileCallback -->
+      <!-- slotProps.removeUploadedFileCallback -->
+      <!-- <div>files.length: {{ files.length }}</div> -->
+      <!-- <div>uploadedFiles.length: {{ uploadedFiles.length }}</div> -->
+      <!-- <div>uploadedFileCount: {{ fileUploadRef?.uploadedFileCount }}</div> -->
+      <Message
+        size="small"
+        v-for="msg of messages"
+        closable
+        @close="fileUploadRef!.messages = []"
+        :key="msg"
+        severity="error"
+        >{{ msg }}
+      </Message>
+
+      <!-- 待上传列表 -->
+      <template v-for="(file, index) of files" :key="file.name + file.type + file.size">
+        <div class="border p-2 rounded-md flex flex-wrap items-center gap-2">
+          <img alt="" :src="file.objectURL" class="w-10 h-10 shrink-0" />
+          <div class="break-all break-anywhere">{{ file.name }}</div>
+          <Badge value="待上传" severity="warn" />
+          <Button text :rounded="true" severity="danger" class="ml-auto" @click="removeFileCallback(index)">
+            <TimesIcon aria-hidden="true" />
+          </Button>
+        </div>
+      </template>
+
+      <!-- 已上传列表（上传中、上传成功、上传失败） -->
+      <template v-for="(file, index) of uploadedFiles" :key="file.name + file.url">
+        <div class="border p-2 rounded-md flex flex-wrap items-center gap-2">
+          <img alt="" :src="file.url || file.rawFile.objectURL" class="w-10 h-10 shrink-0" />
+          <div class="break-all break-anywhere">{{ file.name }}</div>
+          <Badge
+            :value="file.status === 'uploading' ? '上传中' : file.status === 'uploaded' ? '已上传' : '上传失败'"
+            :severity="file.status === 'uploading' ? 'warn' : file.status === 'uploaded' ? 'success' : 'danger'"
+          />
+          <Button
+            text
+            :rounded="true"
+            severity="danger"
+            class="ml-auto"
+            @click="
+              fileUploadRef!.uploadedFileCount--;
+              removeUploadedFileCallback(index);
+            "
+          >
+            <TimesIcon aria-hidden="true" />
+          </Button>
+          <ProgressBar v-if="file.status === 'uploading'" :value="file.progress" />
+        </div>
+      </template>
+    </template>
+  </FileUpload>
+</template>
+
+<style scoped></style>
--- a/src/components/vue-macros/ReusableTemplate.vue
+++ b/src/components/vue-macros/ReusableTemplate.vue
@ -1,14 +1,26 @@
 <template>
-  <TemplateFoo.define v-slot="{ msg }">
+  <TemplateFoo.define v-slot="{ $slots, msg }">
    <div>Hello {{ msg.toUpperCase() }}</div>
+    <component :is="$slots.slotNameee" slotPropName="valueee" />
  </TemplateFoo.define>

  <TemplateFoo.reuse msg="World" />
-  <TemplateFoo.reuse msg="Reusable" />
+  <TemplateFoo.reuse msg="Reusable">
+    <template #slotNameee="{ slotPropName }">
+      <div>Passing Slots,{{ slotPropName }}</div>
+    </template>
+  </TemplateFoo.reuse>
 </template>

 <script setup lang="ts">
 import { createReusableTemplate } from '@vueuse/core';

-const TemplateFoo = createReusableTemplate<{ msg: string }>();
+const TemplateFoo = createReusableTemplate<
+  { msg: string },
+  {
+    slotNameee: {
+      slotPropName: string;
+    };
+  }
+>();
 </script>
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@ -1,7 +1,6 @@
 <script lang="tsx" setup>
 import { routes } from 'vue-router/auto-routes';
 import I18nComp from '../components/i18nComp/index.vue';
-import Primevue from '@/components/primevue/primevue.vue';

 useHead({
  // Titles
@ -40,6 +39,10 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
    <li><router-link class="green" :to="{ name: 'InfiniteLoading' }">Infinite Loading</router-link></li>
  </ul>

+  <div b="1px solid pink" mt-2 p-2>
+    <Primevue />
+  </div>
+
  <div b="1px solid pink" mt-2>
    <I18nComp />
  </div>
@ -68,10 +71,6 @@ const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props,
    <SendSms />
  </div>

-  <div b="1px solid pink" mt-2 p-2>
-    <Primevue />
-  </div>
-
  <div b="1px solid pink" mt-2 p-2>
    <pre>{{ JSON.stringify(routes, null, 2) }}</pre>
  </div>
--- a/src/plugins/primevue.ts
+++ b/src/plugins/primevue.ts
@ -82,6 +82,8 @@ function setupPrimeVue(app: import('vue').App) {
    locale: {
      ...zhCN['zh-CN'],
      noFileChosenMessage: '未选择文件',
+      pending: '待上传',
+      completed: '已上传',
    }, // usePrimeVue().config.locale
    theme: { preset: Aura },
    options: {
--- a/vite.config.plugins.ts
+++ b/vite.config.plugins.ts
@ -71,6 +71,8 @@ export function Plugins() {
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      // __开头的
+      excludeNames: [/^__/],
      resolvers: [
        IconsResolver({
          prefix: 'icon',