支持多文件上传和文件夹上传

src/views/doc/space.vue

@@ -1,7 +1,7 @@
 <!--
 @ 作者: han2015
 @ 时间: 2025-05-12 15:39:13
-@ 备注: 文档管理组件
+@ 备注: 共享空间组件
 -->
 <script lang="ts" setup>
 import { getFileIcon, readableSize,fileType} from "./tools"
@@ -9,22 +9,18 @@ import sharePermission from './sharePermission.vue';
 import { matterPage,matterInfo} from "@/api/doc/type"
 import { doAccessManage,getSpaceMatterList,doCreateSpaceDir,doDelSpaceMatter,doDelSpace,
   doAiTraining ,doCreateAiagent,doFileUpload} from "@/api/doc/space"
-import { h, proxyRefs } from 'vue'
+import { h } from 'vue'
 import {
   Delete,
   View,
   Download,
   Plus,
   Edit,
-  CircleCheckFilled,
-  Promotion,
   Folder,
 } from '@element-plus/icons-vue'
 import {ElMessage,UploadFile,UploadFiles,ElPagination} from "element-plus";
-import preview from './preview.vue';
 import aiagent from './agent.vue';
 import router from "@/router";
-import { formToJSON } from "axios";
 
 const matterList = ref<matterInfo[]>([])
 const newdir=ref("") //创建新目录时的目录名
@@ -37,10 +33,11 @@ const currentNode=ref<matterInfo>({})  //打开的路径层次
 const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
 const paginInfo = ref({ page: 0, total: 0 })
 
-const filesUpload=ref()
+//文件上传相关的组件引用
+const filesUpload=ref()  //文件上传
+const uploadDirRef = ref() //文件夹上传
 
 //-----------AI---------------------
-const aiAgentVNode = ref<VNode | null>(null) //ai chat 容器
 //const agent=ref<{model:boolean,name:string}>({})
 const currentAgent=ref<{model:boolean,name:string,uuid:string}>({})
 
@@ -236,37 +233,93 @@ function handleSigLoadErr(error: Error, uploadFile: UploadFile, uploadFiles:Uplo
   ElMessage.error(JSON.parse(error.message).msg)
 }
 
-function onCustomUpload(files:any){
+//自定义上传，目的是支持多文件上传
-  console.log(files)
+async function onCustomUpload(file:UploadFile){
-  console.log(fileList.value,"<<<<<<<<<<<<<")
+  const fields=new FormData()
+  fields.append("space",uploadFormData.value.space)
+  fields.append("puuid",uploadFormData.value.puuid)
+  fields.append("file",file.raw)
+  
+  const res = await doFileUpload(fields,'/hxpan/api/space/upload')
+  if(res.code!=200){
+    console.log(file.name+"上传失败! ")
+    alert(file.name+"上传失败! ")
+  }
 
-  if (fileList.value.length === 0) {
+  //上传后继续AI服务训练
-    alert('请先选择文件')
+  handleAiUpload(res.data)
+  // 清空列表
+  fileList.value = []
+  filesUpload.value.clearFiles()
+}
+
+//文件夹上传，原理：选中后文件夹内的每个文件都会调用一次这个方法
+async function uploadFolder(e:Event){
+  const files = e.target!.files??[]
+  for(let f of files){
+    await handleFolderFile(f)
   }
+  onLoadMatterList() //刷新
+}
 
-  console.log("sdfsdfsdf")
+async function handleFolderFile(option:File){
-  return
+  //根据路径，来判断需不需要重建目录
-  for (const file of fileList.value) {
+  const _path = option.webkitRelativePath
-    const formData = new FormData()
+  const _dir=_path.replace(/\/[^/]+\w+$/,"") //只保留文件夹目录,[^/]就是用来限制，只能是最后一个目录
-    formData.append('file', file)
+  const node = matterList.value.filter((item)=>{
-
+    return item.dir && item.path?.endsWith(_dir) 
-    
+  })
-      const fields=new FormData()
+
-      fields.append("space",uploadFormData.value.space)
+  let puuid=""
-      fields.append("puuid",uploadFormData.value.puuid)
+  //说明是新的目录，需要新建；如果存在，直接上传文件即可
-      fields.append("file","uploadFormData.value.space")
+  if(node.length==0){
-    try {
+    const subs= await doCreateMultyDir(_dir,currentNode.value.uuid)
-      doFileUpload(fields,'/hxpan/api/space/upload')  
+    matterList.value.push(...subs) //这里如果子文件夹多的时候，可能会造成第一级路径多次创建，只是造成资源浪费，问题不大
-    } catch (err) {
+
-      console.error('上传失败:', err)
+    const newnodes=matterList.value.filter((item)=>{
+      return item.dir && item.path?.endsWith(_dir)
+    })
+    if(newnodes.length>0){
+      puuid=newnodes[0].uuid
+    }else{
+      console.log(_path+"上传失败! ")
+      alert(_path +" 上传失败! ")
+      return
     }
+  }else{
+    puuid=node[0].uuid
   }
   
-  // 清空列表
+  const fields = new FormData()
-  fileList.value = []
+  fields.append('file', option)
-  filesUpload.value.clearFiles()
+  fields.append("space",uploadFormData.value.space)
+  fields.append("puuid",puuid)
+  const res = await doFileUpload(fields,'/hxpan/api/space/upload')
+  if(res.code!=200){
+    console.log(_path+"上传失败! ")
+    alert(_path +" 上传失败! ")
+  }
+  //上传后继续AI服务训练，是不是需要上传，在handleAiUpload里面有检测
+  handleAiUpload(res.data)
 }
 
+//创建多级目录，并返回matterinfos数组
+async function doCreateMultyDir(path:string,uuid:string){
+  const list=[];
+  const dirs=path.split("/")
+  for(let i=0;i<dirs.length;i++){
+    await doCreateSpaceDir(props.uid,{
+      puuid:uuid,
+      name:dirs[i],
+      space:props.spaceid,
+      roles:props.roles,
+    }).then((resp)=> {
+     uuid=resp.data.uuid //第一级别的uuid, 是第二级的puuid
+     list.push(resp.data)
+    })
+  }
+  return list
+}
 
 //-------------------------AI section--------------
 //处理智能体创建
@@ -295,7 +348,8 @@ function onAiAgent(){
   })
 }
 function handleAiUpload(info:matterInfo){
-  if (currentNode.value.puuid){
+  //只有当前路径是智能体，上传文件才会进行训练
+  if (currentNode.value.agent){
     doAiTraining(`/agents/${currentAgent.value.uuid}/updates`,{"matter":info.uuid}).then(resp=>{
       console.log(resp)
     })
@@ -347,6 +401,7 @@ onMounted(() => {
   currentNode.value.uuid="root"
   //设置默认的AI智能体
   currentAgent.value={name:"通用AI",model:false,uuid:"5bd9b0e9-d3f4-4089-670a-880009e925a8"}
+
   onLoadMatterList()
 });
 
@@ -381,11 +436,19 @@ function isOwner(){
           :data="uploadFormData"
           :on-change="onCustomUpload"
           :show-file-list="true"
-          multiple
+          multiple>
-          :limit="2"
-          :action="apiURL+'/space/upload'">
           <span>上传文件</span>
         </el-upload>
+        <div class="el-button el-button--default" style="position: relative;">
+          <input type="file" class="el-button el-button--default" style="position: absolute;opacity: 0;width: 55px;"
+          ref="uploadDirRef"
+          @change="uploadFolder"
+          webkitdirectory
+          multiple
+          />
+          文件夹上传
+        </div>
+        
         <el-button @click="createDir">新建目录</el-button>
         <el-button type="danger" plain @click="onDelMatter({uuid:currentNode.uuid,name:currentNode.name,dir:true,
           puuid:currentNode.puuid,path:currentNode.path})">删除目录</el-button>