create-koa-boot 1.0.0

package/templates/example/frontend/src/components/FileUpload.vue

@@ -0,0 +1,408 @@
+<!-- 通用文件上传组件 -->
+<template>
+  <div class="file-upload">
+    <el-upload
+      v-model:file-list="fileList"
+      :class="uploadBtnClass"
+      :multiple="props.multiple"
+      :headers="uploadHeaders"
+      :name="UPLOAD_FIELD_NAME"
+      :before-upload="handleBeforeUpload"
+      :on-exceed="handleExceed"
+      :on-progress="handleProgress"
+      :on-success="handleSuccess"
+      :on-error="handleError"
+      :action="UPLOAD_URL"
+      :accept="props.accept"
+      :limit="props.limit"
+      :disabled="props.disabled"
+    >
+      <el-button
+        v-if="props.showUploadBtn"
+        type="primary"
+        :disabled="props.disabled || fileList.length >= props.limit"
+      >
+        <el-icon class="el-icon--left"><Upload /></el-icon>
+        {{ props.uploadBtnText }}
+      </el-button>
+
+      <template #tip v-if="props.showTip">
+        <div class="el-upload__tip">{{ props.tip }}</div>
+      </template>
+
+      <template #file="{ file }">
+        <div class="file-item">
+          <a class="file-item__name" @click.prevent="handleDownload(file)" :title="file.name">
+            <el-icon class="file-item__icon"><Document /></el-icon>
+            <span class="file-item__text">{{ file.name }}</span>
+          </a>
+
+          <!-- 上传进度 -->
+          <span v-if="file.status === 'uploading'" class="file-item__percent">
+            {{ file.percentage }}%
+          </span>
+
+          <!-- 删除按钮 -->
+          <span
+            v-if="props.showDelBtn && !props.disabled && file.status !== 'uploading'"
+            class="file-item__close"
+            @click.stop="handleRemove(file)"
+          >
+            <el-icon><Close /></el-icon>
+          </span>
+        </div>
+      </template>
+    </el-upload>
+
+    <!-- 上传进度条 -->
+    <el-progress
+      v-if="uploading"
+      class="file-upload__progress"
+      :percentage="uploadPercent"
+      :color="progressColor"
+      :stroke-width="6"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import type {
+  UploadRawFile,
+  UploadUserFile,
+  UploadFile,
+  UploadProgressEvent,
+  UploadProps,
+} from 'element-plus'
+import { UPLOAD_URL, UPLOAD_FIELD_NAME } from '../api/system/fileUpload'
+import type { UploadFileInfo, UploadSuccessResponse } from '../api/system/fileUpload'
+
+// ============================ 本地类型 ============================
+
+interface ExtendedUploadUserFile extends UploadUserFile {
+  _fileNo?: string
+}
+
+// ============================ Props ============================
+
+const props = withDefaults(
+  defineProps<{
+    /** v-model: 文件信息数组 */
+    modelValue?: UploadFileInfo[]
+    /** 最大上传数量 */
+    limit?: number
+    /** 单文件最大大小（字节），默认 10MB */
+    uploadMaxSize?: number
+    /** 允许的文件类型，如 '.pdf,.doc,.docx' */
+    accept?: string
+    /** 是否显示上传按钮 */
+    showUploadBtn?: boolean
+    /** 是否显示删除按钮 */
+    showDelBtn?: boolean
+    /** 是否允许多选 */
+    multiple?: boolean
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 上传按钮文本 */
+    uploadBtnText?: string
+    /** 是否显示提示信息 */
+    showTip?: boolean
+    /** 提示信息内容 */
+    tip?: string
+  }>(),
+  {
+    modelValue: () => [],
+    limit: 10,
+    uploadMaxSize: 10 * 1024 * 1024,
+    accept: '*',
+    showUploadBtn: true,
+    showDelBtn: true,
+    multiple: true,
+    disabled: false,
+    uploadBtnText: '上传文件',
+    showTip: false,
+    tip: '',
+  },
+)
+
+// ============================ Emits ============================
+
+const emit = defineEmits<{
+  /** 文件列表变更 */
+  (e: 'update:modelValue', value: UploadFileInfo[]): void
+  /** 文件被移除 */
+  (e: 'remove', file: UploadFileInfo): void
+  /** 个别文件上传成功（携带后端完整响应） */
+  (e: 'upload-success', file: UploadFileInfo, response: UploadSuccessResponse): void
+}>()
+
+// ============================ 状态 ============================
+
+const fileList = ref<ExtendedUploadUserFile[]>([])
+const prevModelValue = ref<UploadFileInfo[]>([])
+const uploading = ref(false)
+const uploadPercent = ref(0)
+
+// ============================ 计算属性 ============================
+
+const uploadBtnClass = computed(() =>
+  props.showUploadBtn ? 'upload-btn--visible' : 'upload-btn--hidden',
+)
+
+const uploadHeaders = computed(() => ({
+  Authorization: `Bearer ${localStorage.getItem('token') || ''}`,
+}))
+
+const progressColor = computed(() => {
+  const pct = uploadPercent.value
+  if (pct < 30) return '#909399'
+  if (pct < 70) return '#375ee8'
+  return '#67c23a'
+})
+
+// ============================ Watch ============================
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (!newVal || newVal.length === 0) {
+      fileList.value = []
+      prevModelValue.value = []
+      return
+    }
+
+    const oldVal = prevModelValue.value
+    if (
+      oldVal.length === newVal.length &&
+      oldVal.every((item, i) => item.url === newVal[i]?.url && item.name === newVal[i]?.name)
+    ) {
+      return
+    }
+
+    prevModelValue.value = [...newVal]
+    fileList.value = newVal.map((info) => ({
+      name: info.name,
+      url: info.url,
+      status: 'success' as const,
+    })) as ExtendedUploadUserFile[]
+  },
+  { immediate: true, deep: false },
+)
+
+// ============================ 超出限制 ============================
+
+const handleExceed: UploadProps['onExceed'] = () => {
+  ElMessage.warning(`最多只能上传 ${props.limit} 个文件`)
+}
+
+// ============================ 上传校验 ============================
+
+const handleBeforeUpload = (file: UploadRawFile) => {
+  if (file.size > props.uploadMaxSize) {
+    const maxMb = Math.trunc(props.uploadMaxSize / 1024 / 1024)
+    ElMessage.warning(`文件大小不能超过 ${maxMb}MB`)
+    return false
+  }
+
+  // 文件类型校验
+  if (props.accept !== '*' && props.accept.trim() !== '') {
+    const acceptTypes = props.accept
+      .split(',')
+      .map((t) => t.trim())
+      .filter(Boolean)
+
+    if (acceptTypes.length > 0) {
+      const isValid = acceptTypes.some((acceptType) => {
+        // 扩展名匹配，如 '.pdf'
+        if (acceptType.startsWith('.')) {
+          const ext = acceptType.substring(1).toLowerCase()
+          return file.name.toLowerCase().endsWith(`.${ext}`)
+        }
+        // MIME 类型匹配，如 'image/*'
+        if (acceptType.includes('/')) {
+          if (acceptType.endsWith('/*')) {
+            return file.type.startsWith(acceptType.replace('/*', '/'))
+          }
+          return file.type === acceptType
+        }
+        return false
+      })
+
+      if (!isValid) {
+        ElMessage.warning(`文件类型不符合要求，仅支持: ${props.accept}`)
+        return false
+      }
+    }
+  }
+
+  uploadPercent.value = 0
+  uploading.value = true
+  return true
+}
+
+// ============================ 进度 ============================
+
+const handleProgress: UploadProps['onProgress'] = (event: UploadProgressEvent) => {
+  uploadPercent.value = event.percent
+}
+
+// ============================ 上传回调 ============================
+
+const handleSuccess: UploadProps['onSuccess'] = (
+  response: UploadSuccessResponse,
+  uploadFile: UploadFile,
+) => {
+  uploading.value = false
+  uploadPercent.value = 0
+
+  if (response.code === 200) {
+    const data = response.data
+    const info: UploadFileInfo = {
+      name: uploadFile.name || data.name,
+      url: data.url,
+    }
+
+    ;(uploadFile as ExtendedUploadUserFile)._fileNo = data.fileNo
+
+    emitUpdateList()
+    ElMessage.success('上传成功')
+    emit('upload-success', info, response)
+  } else {
+    ElMessage.error(response.message || '上传失败')
+    const idx = fileList.value.findIndex((f) => f.uid === uploadFile.uid)
+    if (idx > -1) fileList.value.splice(idx, 1)
+  }
+}
+
+const handleError: UploadProps['onError'] = () => {
+  uploading.value = false
+  uploadPercent.value = 0
+  ElMessage.error('上传失败，请检查网络后重试')
+}
+
+// ============================ 删除 ============================
+
+const handleRemove = (file: UploadUserFile) => {
+  const targetName = file.name
+  const targetUrl = file.url
+
+  fileList.value = fileList.value.filter(
+    (f) => !(f.name === targetName && f.url === targetUrl),
+  )
+
+  emitUpdateList()
+
+  emit('remove', {
+    name: targetName || '',
+    url: targetUrl || '',
+    ...((file as ExtendedUploadUserFile)._fileNo
+      ? { fileNo: (file as ExtendedUploadUserFile)._fileNo }
+      : {}),
+  } as UploadFileInfo)
+}
+
+// ============================ 下载 ============================
+
+const handleDownload = (file: UploadUserFile) => {
+  if (file.url) {
+    window.open(file.url, '_blank')
+  } else {
+    ElMessage.warning('文件地址不存在，无法下载')
+  }
+}
+
+// ============================ 工具函数 ============================
+
+function emitUpdateList(): UploadFileInfo[] {
+  const list: UploadFileInfo[] = fileList.value
+    .filter((f) => f.status === 'success' && f.url)
+    .map((f) => ({ name: f.name, url: f.url! }))
+  emit('update:modelValue', list)
+  return list
+}
+</script>
+
+<style lang="scss" scoped>
+.file-upload {
+  // 上传按钮显隐
+  .upload-btn--visible :deep(.el-upload) {
+    display: inline-flex;
+  }
+
+  .upload-btn--hidden :deep(.el-upload) {
+    display: none;
+  }
+
+  // 进度条
+  &__progress {
+    margin-top: 8px;
+    max-width: 400px;
+  }
+
+  // 文件列表默认样式去除边距
+  :deep(.el-upload-list) {
+    margin: 0;
+  }
+
+  :deep(.el-upload-list__item) {
+    margin-top: 4px;
+    transition: none;
+  }
+}
+
+// 文件项
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  &__name {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    font-size: 16px;
+    color: var(--el-color-primary);
+  }
+
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__percent {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__close {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s, color 0.2s;
+
+    &:hover {
+      opacity: 1;
+      color: var(--el-color-danger);
+    }
+  }
+}
+</style>