云盘：添加批量上传进度条

src/views/doc/manage.vue

@@ -71,6 +71,9 @@ let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展
 
 const modListOrGrild=ref(true)
 const modRecycling=ref(false)
+//进度条
+const percentage=ref(0)
+const onprogress=ref(false)
 
 const Departs = computed(() => {
     return `${'p0'+userStore.userInfoCont.userId},${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}`
@@ -326,6 +329,10 @@ function restoreMatter(row:matterInfo){
 
 //加载目录文件列表
 function onLoadMatterList(){
+  //重置进度条
+  percentage.value=0 
+  onprogress.value=false
+
   let _page: matterPage = {
     page: paginInfo.value.page,
     pageSize: 50,
@@ -546,9 +553,20 @@ async function onlyOfficeEdit(row:matterInfo){
 //自定义上传，目的是支持多文件上传, 使用html原生组件，是为了解决并发问题
 async function onCustomUpload(e:Event){
   const files = e.target!.files??[]
-  for(let ff of files){
-    await handleSingleFile(ff)
+  onprogress.value=true
+  const count=files.length
+  let result=""
+   for(let index = 0; index < count; index++){
+    onprogress.value=true
+    const ff = files[index]
+    await handleSingleFile(ff).catch((err)=>{
+      console.log(err)
+      result+=err
+    })
+    percentage.value = Number(((index + 1) / count).toPrecision(2)) * 100
   }
+  if(result!="") alert(result)
+
   onLoadMatterList() //刷新
 }
 
@@ -561,17 +579,28 @@ async function handleSingleFile(ff:File){
   const res = await doFileUpload(fields,'/hxpan/api/matter/upload')
   if(res.code!=200){
     console.log(ff.name+"上传失败! ")
-    alert(ff.name+"上传失败! ")
+    throw new Error(ff.name+"上传失败!\n ")
   }
 }
 
 //文件夹上传，原理：自定义的input组件，一次拿到所有需要上传的文件列表，然后依次上传
 //能减少并发问题
 async function uploadFolder(e:Event){
+  onprogress.value=true
   const files = e.target!.files??[]
-  for(let f of files){
-    await handleFolderFile(f)
+  const count=files.length
+  let result=""
+  for(let index = 0; index < count; index++){
+    onprogress.value=true
+    const f = files[index]
+    await handleFolderFile(f).catch((err)=>{
+      console.log(err)
+      result+=err
+    })
+    percentage.value =  Number(((index + 1) / count).toPrecision(2)) * 100
   }
+  if(result!="") alert(result)
+  
   onLoadMatterList() //刷新
 }
 
@@ -597,7 +626,7 @@ async function handleFolderFile(option:File){
       puuid=newnodes[0].uuid
     }else{
       console.log(_path+"上传失败! ")
-      alert(_path +" 上传失败! ")
+      throw new Error(_path +" 上传失败!\n ")
       return
     }
   }else{
@@ -611,7 +640,7 @@ async function handleFolderFile(option:File){
   const res = await doFileUpload(fields,'/hxpan/api/matter/upload')
   if(res.code!=200){
     console.log(_path+"上传失败! ")
-    alert(_path +" 上传失败! ")
+    throw new Error(_path +" 上传失败!\n ")
   }
 }
 
@@ -834,6 +863,10 @@ const handleSelectionChange = (val:matterInfo[]) => {
 </script>
 
 <template>
+  <el-dialog v-model="onprogress"  width="50%" title="上传进度">
+      请勿关闭页面。。。
+      <el-progress style="width: 90%;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
+  </el-dialog>
   <div style="display:grid;grid-template-columns:1fr 4fr; width: 100%;height: 100%;">
   <div class="menus_tree">
     <div class="area_header">

src/views/doc/space.vue

@@ -20,7 +20,7 @@ import {
   Setting,
   Grid,List,
 } from '@element-plus/icons-vue'
-import {ElMessage,UploadFile,UploadFiles,ElPagination} from "element-plus";
+import {ElMessage,UploadFile,UploadFiles,ElPagination, ElProgress} from "element-plus";
 import aiagent from './agent.vue';
 import router from "@/router";
 import SvgIcon from "@/components/SvgIcon/index.vue";
@@ -43,6 +43,10 @@ const paginInfo = ref({ page: 0, total: 0 })
 
 const CutLevelPermit=ref(0)
 const modListOrGrild=ref(true) //列表显示还是栅格显示
+
+const percentage=ref(0)
+const onprogress=ref(true)
+
 enum PERMITS {
   FORBID, //0
   VIEW, //1
@@ -172,6 +176,9 @@ function onDownload(row:matterInfo){
 
 //加载目录文件列表
 function onLoadMatterList(name?:string){
+  percentage.value=0 
+  onprogress.value=false
+
   let _page: matterPage= {
     page: paginInfo.value.page,
     pageSize: 50,
@@ -373,9 +380,19 @@ function handleSigLoadErr(error: Error, uploadFile: UploadFile, uploadFiles:Uplo
 //自定义上传，目的是支持多文件上传, 使用原生组件，是为了解决并发问题
 async function onCustomUpload(e:Event){
   const files = e.target!.files??[]
-  for(let ff of files){
-    await handleSingleFile(ff)
+  const count=files.length
+  let result=""
+   for(let index = 0; index < count; index++){
+    onprogress.value=true
+    const ff = files[index]
+    await handleSingleFile(ff).catch((err)=>{
+      console.log(err)
+      result+=err
+    })
+    percentage.value =  Number(((index + 1) / count).toPrecision(2)) * 100
   }
+  if(result!="") alert(result)
+
   onLoadMatterList() //刷新
 }
 
@@ -388,7 +405,7 @@ async function handleSingleFile(ff:File){
   const res = await doFileUpload(fields,'/hxpan/api/space/upload')
   if(res.code!=200){
     console.log(ff.name+"上传失败! ")
-    alert(ff.name+"上传失败! ")
+    throw new Error(ff.name+"上传失败!\n ")
   }
 
   //上传后继续AI服务训练
@@ -398,13 +415,25 @@ async function handleSingleFile(ff:File){
 //文件夹上传，原理：自定义的input组件，一次拿到所有需要上传的文件列表，然后依次上传
 //能减少并发问题
 async function uploadFolder(e:Event){
+  onprogress.value=true
   const files = e.target!.files??[]
-  for(let f of files){
-    await handleFolderFile(f)
+  const count=files.length
+  let result=""
+  for(let index = 0; index < count; index++){
+    onprogress.value=true
+    const f = files[index]
+    await handleFolderFile(f).catch((err)=>{
+      console.log(err)
+      result+=err
+    })
+    percentage.value =  Number(((index + 1) / count).toPrecision(2)) * 100
   }
+  if(result!="") alert(result)
+  
   onLoadMatterList() //刷新
 }
 
+
 async function handleFolderFile(option:File){
   //根据路径，来判断需不需要重建目录
   const _path = option.webkitRelativePath
@@ -418,7 +447,6 @@ async function handleFolderFile(option:File){
   if(node.length==0){
     const subs= await doCreateMultyDir(_dir,currentNode.value.uuid)
     matterList.value.push(...subs) //这里如果子文件夹多的时候，可能会造成第一级路径多次创建，只是造成资源浪费，问题不大
-
     const newnodes=matterList.value.filter((item)=>{
       return item.dir && _dir.endsWith(item.name!)  //item.path?.endsWith(_dir)
     })
@@ -426,8 +454,7 @@ async function handleFolderFile(option:File){
       puuid=newnodes[0].uuid
     }else{
       console.log(_path+"上传失败! ")
-      alert(_path +" 上传失败! ")
-      return
+      throw new Error(_path +" 上传失败!\n ")
     }
   }else{
     puuid=node[0].uuid
@@ -440,10 +467,12 @@ async function handleFolderFile(option:File){
   const res = await doFileUpload(fields,'/hxpan/api/space/upload')
   if(res.code!=200){
     console.log(_path+"上传失败! ")
-    alert(_path +" 上传失败! ")
+    throw new Error(_path+"上传失败!\n ") 
   }
+
   //上传后继续AI服务训练，是不是需要上传，在handleAiUpload里面有检测
   handleAiUpload(res.data)
+
 }
 
 //创建多级目录，并返回matterinfos数组
@@ -623,7 +652,12 @@ function isOwner(){
         <el-button  :icon="Grid"  @click="updateListOrGrid(false)"></el-button>
       </el-button-group>
     </el-row>
-
+    
+    <el-dialog v-model="onprogress"  width="50%" title="上传进度">
+        请勿关闭页面。。。
+       <el-progress style="width: 90%;" :text-inside="true" :stroke-width="26" :percentage="percentage" />
+    </el-dialog>
+   
     <el-row :gutter="24" style="overflow-y: auto;height: 90%;">
       <el-table v-if="modListOrGrild"
         stripe