Fixed: File upload

Author: ZhaoJiSen

ui/.env.development

@@ -8,10 +8,10 @@ VITE_PUBLIC_PATH=/koko
 VITE_KOKO_WS_URL="ws://localhost:5050"
 
 # API 接口路径
-VITE_KOKO_API_URL="http://localhost:5050"
+VITE_KOKO_API_URL="http://localhost:8080"
 
 # 静态资路径
-VITE_KOKO_STATIC_URL="http://localhost:5050"
+VITE_KOKO_STATIC_URL="http://localhost:8080"
 
 # 打包压缩后是否删除源文件
 VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE=false

ui/src/components/FileManagement/components/fileManage/index.vue

@@ -53,10 +53,10 @@
 
       <n-upload
         abstract
-        multiple
+        :multiple="false"
         :show-retry-button="false"
         :custom-request="customRequest"
-        v-model:file-list="fileList"
+        v-model:file-list="uploadFileList"
         @change="handleUploadFileChange"
       >
         <n-button-group>
@@ -88,7 +88,7 @@
           v-model:show="showInner"
         >
           <n-drawer-content :title="t('TransferHistory')">
-            <n-scrollbar style="max-height: 400px" v-if="fileList.length > 0">
+            <n-scrollbar style="max-height: 400px" v-if="uploadFileList">
               <n-upload-file-list />
             </n-scrollbar>
 
@@ -192,7 +192,7 @@ export interface IFilePath {
   showArrow: boolean;
 }
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     columns: DataTableColumns<RowData>;
   }>(),
@@ -201,8 +201,6 @@ const props = withDefaults(
   }
 );
 
-// todo)) 小屏幕下的宽度适配
-
 const { t } = useI18n();
 const message = useMessage();
 const options = getDropSelections(t);
@@ -227,7 +225,7 @@ const scrollRef = ref(null);
 
 const currentRowData = ref<RowData>();
 const filePathList = ref<IFilePath[]>([]);
-const fileList = ref<UploadFileInfo[]>([]);
+const uploadFileList = ref<UploadFileInfo[]>([]);
 
 watch(
   () => fileManageStore.currentPath,
@@ -500,7 +498,7 @@ const handleUploadFileChange = (options: { fileList: Array<UploadFileInfo> }) =>
   showInner.value = true;
 
   if (options.fileList.length > 0) {
-    fileList.value = options.fileList;
+    uploadFileList.value = options.fileList;
   }
 };
 
@@ -511,7 +509,7 @@ const handleUploadFileChange = (options: { fileList: Array<UploadFileInfo> }) =>
  * @param onProgress
  */
 const customRequest = ({ onFinish, onError, onProgress }: UploadCustomRequestOptions) => {
-  mittBus.emit('file-upload', { fileList, onFinish, onError, onProgress });
+  mittBus.emit('file-upload', { uploadFileList, onFinish, onError, onProgress });
 };
 
 const handleOpenTransferList = () => {

ui/src/hooks/useFileManage.ts

@@ -1,5 +1,5 @@
-import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { computed, ref, watch } from 'vue';
 import { useWebSocket } from '@vueuse/core';
 import { createDiscreteApi, darkTheme } from 'naive-ui';
 import { useFileManageStore } from '@/store/modules/fileManage.ts';
@@ -14,6 +14,8 @@ import type { RouteRecordNameGeneric } from 'vue-router';
 import type { ConfigProviderProps, UploadFileInfo } from 'naive-ui'
 import type { MessageApiInjection } from 'naive-ui/es/message/src/MessageProvider';
 import type { IFileManage, IFileManageConnectData, IFileManageSftpFileItem } from '@/hooks/interface';
+import { message } from '@/languages/modules';
+import { PercentFilled } from '@vicons/material';
 
 export enum MessageType {
   CONNECT = 'CONNECT',
@@ -227,23 +229,14 @@ const initSocketEvent = (socket: WebSocket, t: any) => {
           mittBus.emit('reload-table');
         }
 
-        if (message.cmd === 'upload' && message.data !== 'ok') {
+        if (message.cmd === 'upload' && message.data === 'ok') {
           fileManageStore.setReceived(true);
 
-          socket.send(
-            JSON.stringify({
-              cmd: 'upload',
-              type: 'SFTP_DATA',
-              id: message.id,
-              raw: '',
-              data: JSON.stringify({
-                offSet: 0,
-                merge: true,
-                size: 0,
-                path: message.data
-              })
-            })
-          );
+          globalTipsMessage.success(t('UploadSuccess'));
+        }
+
+        if (message.cmd === 'upload' && message.data !== 'ok') {
+          fileManageStore.setReceived(true);
         }
 
         if (message.cmd === 'download' && message.data) {
@@ -272,7 +265,16 @@ const initSocketEvent = (socket: WebSocket, t: any) => {
       }
 
       case MessageType.SFTP_BINARY: {
-        receivedBuffers.push(message.raw);
+        const binaryString = atob(message.raw);
+        const len = binaryString.length;
+        const bytes = new Uint8Array(len);
+
+
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+
+        receivedBuffers.push(bytes);
 
         break;
       }
@@ -425,7 +427,7 @@ const generateUploadChunks = async (
   socket: WebSocket,
   fileInfo: UploadFileInfo,
   CHUNK_SIZE: number,
-  sentChunks: number
+  sentChunks: Ref<number>
 ) => {
   const fileManageStore = useFileManageStore();
 
@@ -448,13 +450,13 @@ const generateUploadChunks = async (
   const arrayBuffer: ArrayBuffer = await sliceChunk.arrayBuffer();
   const base64String: string = arrayBufferToBase64(arrayBuffer);
 
-  sendData.offSet = sentChunks * CHUNK_SIZE;
+  sendData.offSet = sentChunks.value * CHUNK_SIZE;
   sendBody.raw = base64String;
   sendBody.data = JSON.stringify(sendData);
 
   socket.send(JSON.stringify(sendBody));
 
-  sentChunks++;
+  sentChunks.value++
 
   return new Promise<boolean>(resolve => {
     const interval = setInterval(() => {
@@ -469,55 +471,93 @@ const generateUploadChunks = async (
 /**
  * @description 上传文件
  */
-const handleFileUpload = (
+const handleFileUpload = async (
   socket: WebSocket,
-  fileList: Ref<Array<UploadFileInfo>>,
-  onProgress: any,
+  uploadFileList: Ref<Array<UploadFileInfo>>,
+  _onProgress: any,
   onFinish: () => void,
-  onError: () => void
+  onError: () => void,
+  t: any
 ) => {
+  const maxSliceCount = 100;
+  const maxChunkSize = 1024 * 1024 * 10;
   const fileManageStore = useFileManageStore();
-  let CHUNK_SIZE = 1024 * 1024 * 3;
-
-  fileList.value.forEach(async (fileInfo: UploadFileInfo) => {
-    if (fileInfo.file) {
-      let sliceCount = Math.ceil(fileInfo.file?.size / CHUNK_SIZE);
-      let sliceChunks = [];
-
-      for (let i = 0; i < sliceCount; i++) {
-        sliceChunks.push(fileInfo.file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE));
+  const loadingMessage = globalTipsMessage.loading('上传进度: 0%', { duration: 1000000000 });
+  const fileInfo = uploadFileList.value[0];
+
+  let sliceChunks = [];
+  let CHUNK_SIZE = 1024 * 1024 * 5;
+  let sentChunks = ref(0);
+
+  const unwatch = watch(
+    () => sentChunks.value,
+    (newValue) => {      
+      const percent = (newValue / sliceChunks.length) * 100;
+
+      console.log(
+        '%c DEBUG[ percent ]:',
+        'font-size:13px; background: #1ab394; color:#fff;',
+        percent
+      );
+
+      loadingMessage.content = `上传进度: ${Math.floor(percent)}%`;
+
+      if (percent >= 100) {
+        onFinish();
+        loadingMessage.destroy();
+        mittBus.emit('reload-table');
+        unwatch();
       }
+    }
+  );
 
-      let sentChunks = 0;
-
-      try {
-        for (const sliceChunk of sliceChunks) {
-          fileManageStore.setReceived(false);
-          await generateUploadChunks(sliceChunk, socket, fileInfo, CHUNK_SIZE, sentChunks);
-
-          sentChunks++;
-
-          const percent = (sentChunks / sliceChunks.length) * 100;
+  if (fileInfo && fileInfo.file) {
+    let sliceCount = Math.ceil(fileInfo.file?.size / CHUNK_SIZE);
+    
+    // 如果切片数量大于最大切片数量，那么调大切片大小
+    if (sliceCount > maxSliceCount) {
+      sliceCount = maxSliceCount;
+      CHUNK_SIZE = Math.ceil(fileInfo.file?.size / maxSliceCount);
+    }
 
-          console.log(
-            '%c DEBUG[ percent ]:',
-            'font-size:13px; background: #1ab394; color:#fff;',
-            percent
-          );
+    // 如果切片大小大于最大切片大小，那么依然调整切片数量
+    if (CHUNK_SIZE > maxChunkSize) {
+      CHUNK_SIZE = maxChunkSize;
+      sliceCount = Math.ceil(fileInfo.file?.size / CHUNK_SIZE);
+    }
 
-          onProgress({ percent });
+    for (let i = 0; i < sliceCount; i++) {
+      sliceChunks.push(fileInfo.file.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE));
+    }
 
-          if (percent === 100) {
-            onFinish();
+    try {
+      for (const sliceChunk of sliceChunks) {
+        fileManageStore.setReceived(false);
 
-            mittBus.emit('reload-table');
-          }
-        }
-      } catch (e) {
-        onError();
+        await generateUploadChunks(sliceChunk, socket, fileInfo, CHUNK_SIZE, sentChunks);
       }
+
+      // 结束 chunk 发送 merge: true
+      socket.send(
+        JSON.stringify({
+          cmd: 'upload',
+          type: 'SFTP_DATA',
+          id: fileManageStore.messageId,
+          raw: '',
+          data: JSON.stringify({
+            offSet: 0,
+            merge: true,
+            size: 0,
+            path: `${fileManageStore.currentPath}/${fileInfo.name}`
+          })
+        })
+      );
+
+    } catch (e) {
+      loadingMessage.destroy(); 
+      onError();
     }
-  });
+  }
 };
 
 /**
@@ -532,17 +572,17 @@ export const useFileManage = (token: string, t: any) => {
     mittBus.on(
       'file-upload',
       ({
-        fileList,
+        uploadFileList,
         onFinish,
         onError,
         onProgress
       }: {
-        fileList: Ref<Array<UploadFileInfo>>;
+        uploadFileList: Ref<Array<UploadFileInfo>>;
         onFinish: () => void;
         onError: () => void;
         onProgress: (e: { percent: number }) => void;
       }) => {
-        handleFileUpload(<WebSocket>socket, fileList, onProgress, onFinish, onError);
+        handleFileUpload(<WebSocket>socket, uploadFileList, onProgress, onFinish, onError, t);
       }
     );
 

ui/src/store/modules/fileManage.ts

@@ -27,7 +27,7 @@ export const useFileManageStore = defineStore('fileManage', {
       if (fileList) {
         console.log(
           '%c DEBUG[ fileList ]-72:',
-          'font-size:13px; background:#DCDCDC; color:#2F4F4F;',
+          'font-size:13px; background: #1ab394; color:#fff;',
           fileList
         );
         this.fileList = fileList;

ui/src/utils/mittBus.ts

@@ -20,7 +20,7 @@ type Event = {
   'set-theme': { themeName: string };
   'file-manage': { path: string; type: ManageTypes; new_name?: string };
   'file-upload': {
-    fileList: Ref<Array<UploadFileInfo>>;
+    uploadFileList: Ref<Array<UploadFileInfo>>;
     onFinish: () => void;
     onError: () => void;
     onProgress: (e: { percent: number }) => void;