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/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>