From c09b171c5ce61e7dd901c235b420ee6b3fdbc349 Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Tue, 12 Aug 2025 11:26:36 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=92=8C=E7=BA=A7=E8=81=94=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/FileUpload.api.ts     | 115 ++++++++++++++++++++++++++++
 src/components/BCascader.vue  | 138 ++++++++++++++++++++++++++++++++++
 src/components/BUpLoad.vue    |  95 +++++++++++++++++++++++
 src/components/upLoadView.vue |  16 ----
 types/web.d.ts                |  10 +++
 5 files changed, 358 insertions(+), 16 deletions(-)
 create mode 100644 src/api/FileUpload.api.ts
 create mode 100644 src/components/BCascader.vue
 create mode 100644 src/components/BUpLoad.vue
 delete mode 100644 src/components/upLoadView.vue

diff --git a/src/api/FileUpload.api.ts b/src/api/FileUpload.api.ts
new file mode 100644
index 0000000..34b6ad6
--- /dev/null
+++ b/src/api/FileUpload.api.ts
@@ -0,0 +1,115 @@
+import type { Result } from '#/axios'
+import { http } from '@/utils/http/axios'
+import type { WebHeaders } from '#/web'
+
+/**
+ * 对象存储预签名
+ */
+export function getUploadParams(param: FileUploadRequestParams, headers?: WebHeaders) {
+  return http.request<Result<FileUploadParamsResult>>({
+    url: '/file/getUploadParams',
+    method: 'post',
+    data: param,
+    headers,
+  })
+}
+
+/**
+ * 保存前端直传文件信息
+ */
+export function saveOssFileInfo(fileInfo: UpdateFileInfo, headers?: WebHeaders) {
+  return http.request<Result<UpdateFileInfo>>({
+    url: '/file/saveFileInfo',
+    method: 'post',
+    data: fileInfo,
+    headers,
+  })
+}
+
+/**
+ * 文件上传
+ */
+export function uploadFile(url, file, headers) {
+  return http.request<Result<UpdateFileInfo>>({
+    url,
+    method: 'PUT',
+    data: file,
+    headers,
+  })
+}
+
+/**
+ * 上传文件信息
+ */
+export interface UpdateFileInfo {
+  // id
+  id?: number
+  // 文件访问地址
+  url?: string
+  // 文件大小，单位字节
+  size?: string
+  // 文件名称
+  filename?: string
+  // 原始文件名
+  originalFilename?: string
+  // 基础存储路径
+  basePath?: string
+  // 存储路径
+  path?: string
+  // 文件扩展名
+  ext?: string
+  // MIME类型
+  contentType?: string
+  // 存储平台
+  platform?: string
+  // 缩略图访问路径
+  thUrl?: string
+  // 缩略图名称
+  thFilename?: string
+  // 缩略图大小，单位字节
+  thSize?: string
+  // 缩略图MIME类型
+  thContentType?: string
+  // 文件所属对象id
+  objectId?: string
+  // 文件所属对象类型，例如用户头像，评价图片
+  objectType?: string
+  // 文件元数据
+  metadata?: string
+  // 文件用户元数据
+  userMetadata?: string
+  // 缩略图元数据
+  thMetadata?: string
+  // 缩略图用户元数据
+  thUserMetadata?: string
+  // 附加属性
+  attr?: string
+  // 文件ACL
+  fileAcl?: string
+  // 缩略图文件ACL
+  thFileAcl?: string
+}
+
+/**
+ * 预签名上传参数
+ */
+export interface FileUploadRequestParams {
+  /** 文件名称,请携带扩展名 */
+  fileName?: string
+  /** 文件MIME类型 */
+  mediaType?: string
+  /** 文件大小 */
+  fileSize?: number
+}
+
+/**
+ * 预签名上传参数结果
+ */
+export interface FileUploadParamsResult {
+  /** 上传后文件名称 */
+  attachName?: string
+  /** 文件访问地址 */
+  url?: string
+  /** 文件上传请求头 */
+  headers?: Map<string, string>
+}
diff --git a/src/components/BCascader.vue b/src/components/BCascader.vue
new file mode 100644
index 0000000..89b0481
--- /dev/null
+++ b/src/components/BCascader.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <van-field
+      v-model="showText"
+      label-align="top"
+      readonly
+      :right-icon="showText ? 'clear' : ''"
+      :required="required"
+      :name="name"
+      :rules="rules"
+      :placeholder="placeholder"
+      :label="label"
+      @click="open"
+      @click-right-icon="onClear"
+    />
+    <van-popup
+      v-model:show="show"
+      position="bottom"
+    >
+      <!-- 区域 -->
+      <van-cascader
+        v-model="cascaderValue"
+        :field-names="fieldNames"
+        :title="title || placeholder"
+        :options="cascaderOptions"
+        @close="show = false"
+        @finish="onFinish"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 级联窗口组件
+import { ref } from 'vue'
+
+const { label, placeholder, name, rules = [], required, optionsLevel = 3, options = [], title }
+  = defineProps<{ label: string, placeholder?: string, name: string, rules?: any[], required?: boolean, optionsLevel?: number, options?: any, title?: string }>()
+const fieldNames = ref({
+  text: 'name',
+  value: 'code',
+  children: 'children',
+})
+const modelValue = defineModel<string[]>()
+
+// 显示在 field 上的文本
+const showText = ref<string>('')
+// 显示
+const show = ref<boolean>(false)
+// options
+const cascaderOptions = ref<any[]>([])
+// 选中的值
+const cascaderValue = ref<string>('')
+
+/**
+ * 监听 modelValue 改变
+ */
+watch(() => modelValue.value, () => initData())
+watch(() => options, () => initData())
+/**
+ * 初始化处理各项属性
+ */
+function initData() {
+  if (modelValue.value && options) {
+    cascaderValue.value = modelValue.value[modelValue.value.length - 1] || ''
+    showText.value = findOptionText(cascaderValue.value) || ''
+  }
+  if (options) {
+    cascaderOptions.value = formatDate(options)
+  }
+}
+
+/**
+ * 格式化树装数据
+ */
+function formatDate(data) {
+  if (!Array.isArray(data)) {
+    return []
+  }
+  return data.map((item) => {
+    const { children, ...rest } = item
+    if (children && children.length > 0 && item.level < optionsLevel) {
+      rest.children = formatDate(children)
+    }
+    return rest
+  })
+}
+
+/**
+ * 打开选择弹窗
+ */
+function open() {
+  show.value = true
+}
+
+/**
+ * 选中函数
+ */
+function onFinish({ selectedOptions }) {
+  show.value = false
+  modelValue.value = selectedOptions.map(option => option.code)
+}
+
+function onClear(e) {
+  // 阻止冒泡到 @click
+  e.stopPropagation()
+  modelValue.value = []
+}
+
+/**
+ * 递归查找值在级联列表中对应的文本
+ */
+function findOptionText(value): string {
+  if (!value) {
+    return ''
+  }
+
+  const search = (items, path: any = []) => {
+    for (const item of items) {
+      const currentPath = [...path, item.name]
+      if (item.code === value) {
+        return currentPath.join('/')
+      }
+      if (item.children) {
+        const result = search(item.children, currentPath)
+        if (result) {
+          return result
+        }
+      }
+    }
+    return null
+  }
+  return search(options) || ''
+}
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/components/BUpLoad.vue b/src/components/BUpLoad.vue
new file mode 100644
index 0000000..59feb1a
--- /dev/null
+++ b/src/components/BUpLoad.vue
@@ -0,0 +1,95 @@
+<template>
+  <van-uploader v-bind="$attrs" v-model="fileList" reupload :max-count="1" :preview-image="true" :after-read="afterRead" :before-delete="delImg" />
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref } from 'vue'
+import { showNotify } from 'vant'
+import { getUploadParams, saveOssFileInfo, uploadFile } from '@/api/FileUpload.api.js'
+import type { WebHeaders } from '#/web'
+
+const { webHeader } = defineProps<{ webHeader?: WebHeaders }>()
+const picUrl = defineModel<string | undefined>('picUrl')
+const picId = defineModel<string | undefined>('picId')
+
+const fileList = ref<any[]>([])
+
+const uploadUrl = ref<string>()
+const uploadHeader = ref<Map<string, string>>()
+const uploadAttachName = ref<string>()
+
+watch(() => picUrl.value, () => {
+  buildFileList()
+})
+
+/**
+ *  上传
+ */
+async function afterRead(fileObj) {
+  const file = fileObj.file
+  // 前端直传获取签名链接
+  await getUploadParams({
+    fileName: file.name,
+    mediaType: file.type || '*/*',
+    fileSize: file.size,
+  }, webHeader)
+    .then(({ data }) => {
+      // 预签名形式
+      uploadUrl.value = data.url
+      uploadHeader.value = data.headers
+      uploadAttachName.value = data.attachName
+    })
+    .catch(() => {
+      showNotify({ type: 'danger', message: '文件上传失败' })
+    })
+  // 文件上传
+  await uploadFile(uploadUrl.value, file, { 'Content-Type': file.type || '*/*' }).then()
+  // 保存上传记录
+  const url = `/${uploadAttachName.value}`
+  saveOssFileInfo({
+    url,
+    size: file.size,
+    originalFilename: file.name,
+    filename: uploadAttachName.value,
+    contentType: file.type,
+  }, webHeader)
+    .then(() => {
+      picUrl.value = url
+      showNotify({ type: 'success', message: '文件上传成功' })
+    })
+    .catch(() => {
+      showNotify({ type: 'danger', message: '文件上传失败' })
+    })
+}
+
+/**
+ * 构建文件列表
+ */
+function buildFileList() {
+  if (picUrl.value) {
+    fileList.value = [{
+      status: 'done',
+      url: getFileUrl(picUrl.value),
+    }]
+  }
+  else {
+    fileList.value = []
+  }
+}
+
+/**
+ * 获取文件访问地址
+ * @param fileUrl
+ */
+function getFileUrl(fileUrl?: string) {
+  return `${import.meta.env.VITE_GLOB_API_URL_PREFIX}/file/download${fileUrl}`
+}
+
+/**
+ * 删除
+ */
+function delImg() {
+  picUrl.value = undefined
+  picId.value = undefined
+}
+</script>
diff --git a/src/components/upLoadView.vue b/src/components/upLoadView.vue
deleted file mode 100644
index 6ac1569..0000000
--- a/src/components/upLoadView.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <van-uploader v-model="fileList" :max-count="1" :preview-image="true" :after-read="afterRead" :before-read="beforeRead()" />
-</template>
-
-<script setup>
-
-// 上传前回调
-function beforeRead() {
-  console.log('上传前')
-}
-
-// 上传后回调
-function afterRead(file) {
-  console.log(file)
-}
-</script>
diff --git a/types/web.d.ts b/types/web.d.ts
index 073e2e0..21076ce 100644
--- a/types/web.d.ts
+++ b/types/web.d.ts
@@ -36,3 +36,13 @@ export interface KeyValue {
   key: string
   value: string
 }
+
+/**
+ * 请求头信息
+ */
+export interface WebHeaders {
+  /** token */
+  'AccessToken': string
+  /** 终端编码 */
+  'x-client-code': string
+}