chore: 文件上传增加category等参数

src/api/infra/file/index.ts

@@ -17,6 +17,12 @@ export interface FilePresignedUrlRespVO {
   url: string
 }
 
+export interface UploadFileParams {
+  path?: string
+  categoryId?: string
+  categoryPath?: string
+}
+
 // 查询文件列表
 export const getFilePage = (params: FilePageReqVO) => {
   return request.get({ url: '/infra/file/page', params })

src/components/UploadFile/src/UploadFile.vue

@@ -9,7 +9,7 @@
       :disabled="disabled"
       :delete-disabled="delDisabled"
       :drag="drag"
-      :http-request="httpRequest"
+      :http-request="handleRequest"
       :limit="props.limit"
       :multiple="props.limit > 1"
       :on-error="excelUploadError"
@@ -47,7 +47,7 @@
               下载
             </el-link>
           </div>
-          <div class="ml-10px" v-if=!delDisabled>
+          <div class="ml-10px" v-if="!delDisabled">
             <el-button link type="danger" @click="handleRemove(row.file)"> 删除</el-button>
           </div>
         </div>
@@ -57,7 +57,13 @@
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
-import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import type {
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
+  UploadRequestOptions,
+  UploadUserFile
+} from 'element-plus'
 import { isString } from '@/utils/is'
 import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload'
 import { UploadFile } from 'element-plus/es/components/upload/src/upload'
@@ -76,7 +82,8 @@ const props = defineProps({
   drag: propTypes.bool.def(false), // 拖拽上传
   isShowTip: propTypes.bool.def(true), // 是否显示提示
   disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
-  delDisabled: propTypes.bool.def(false) // 是否禁用删除
+  delDisabled: propTypes.bool.def(false), // 是否禁用删除
+  categoryPath: propTypes.string.def('') // 文件目录路径
 })
 
 // ========== 上传相关 ==========
@@ -87,6 +94,15 @@ const uploadNumber = ref<number>(0)
 
 const { uploadUrl, httpRequest } = useUpload()
 
+// 自定义上传
+const handleRequest = async (f: UploadRequestOptions) => {
+  if (!!props.categoryPath) {
+    httpRequest(f, { categoryPath: props.categoryPath })
+  } else {
+    httpRequest(f)
+  }
+}
+
 // 文件上传之前判断
 const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
   if (fileList.value.length >= props.limit) {

src/components/UploadFile/src/UploadImg.vue

@@ -8,7 +8,7 @@
       :class="['upload', drag ? 'no-border' : '']"
       :disabled="disabled"
       :drag="drag"
-      :http-request="httpRequest"
+      :http-request="handleRequest"
       :multiple="false"
       :on-error="uploadError"
       :on-success="uploadSuccess"
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { UploadProps } from 'element-plus'
+import type { UploadProps, UploadRequestOptions } from 'element-plus'
 
 import { generateUUID } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
@@ -79,7 +79,8 @@ const props = defineProps({
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
   borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
   showDelete: propTypes.bool.def(true), // 是否显示删除按钮
-  showBtnText: propTypes.bool.def(true) // 是否显示按钮文字
+  showBtnText: propTypes.bool.def(true), // 是否显示按钮文字
+  categoryPath: propTypes.string.def('') // 文件目录路径
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -101,6 +102,15 @@ const deleteImg = () => {
 
 const { uploadUrl, httpRequest } = useUpload()
 
+// 自定义上传
+const handleRequest = async (f: UploadRequestOptions) => {
+  if (!!props.categoryPath) {
+    httpRequest(f, { categoryPath: props.categoryPath })
+  } else {
+    httpRequest(f)
+  }
+}
+
 const editImg = () => {
   const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
   dom && dom.dispatchEvent(new MouseEvent('click'))

src/components/UploadFile/src/UploadImgs.vue

@@ -8,7 +8,7 @@
       :class="['upload', drag ? 'no-border' : '']"
       :disabled="disabled"
       :drag="drag"
-      :http-request="httpRequest"
+      :http-request="handleRequest"
       :limit="limit"
       :multiple="true"
       :on-error="uploadError"
@@ -47,7 +47,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
+import type { UploadFile, UploadProps, UploadRequestOptions, UploadUserFile } from 'element-plus'
 import { ElNotification } from 'element-plus'
 
 import { propTypes } from '@/utils/propTypes'
@@ -78,7 +78,8 @@ const props = defineProps({
   fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
   height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+  borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
+  categoryPath: propTypes.string.def('') // 文件目录路径
 })
 
 const { uploadUrl, httpRequest } = useUpload()
@@ -86,6 +87,16 @@ const { uploadUrl, httpRequest } = useUpload()
 const fileList = ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
 const uploadList = ref<UploadUserFile[]>([])
+
+// 自定义上传
+const handleRequest = async (f: UploadRequestOptions) => {
+  if (!!props.categoryPath) {
+    httpRequest(f, { categoryPath: props.categoryPath })
+  } else {
+    httpRequest(f)
+  }
+}
+
 /**
  * @description 文件上传之前判断
  * @param rawFile 上传的文件