perf(frontend): sql文件上传大小限制 1GB #3499

TencentBlueKing · Mar 11, 2024 · 3fb6af6 · 3fb6af6
1 parent 88541d4
commit 3fb6af6
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 53 deletions.
diff --git a/dbm-ui/frontend/.nvmrc b/dbm-ui/frontend/.nvmrc
@@ -1 +1 @@
-v16.20.1
+v20.11.0
diff --git a/...frontend/src/views/mysql/sql-execute/steps/step1/components/sql-file/local-file/Index.vue b/...frontend/src/views/mysql/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
@@ -13,13 +13,13 @@
 
 <template>
   <BkFormItem
-    :label="$t('SQL文件')"
+    :label="t('SQL文件')"
     property="execute_sql_files"
     required
     :rules="rules">
     <template #labelAppend>
       <span style="font-size: 12px; font-weight: normal; color: #8a8f99;">
-        （{{ $t('最终执行结果以SQL文件内容为准') }}）
+        （{{ t('最终执行结果以SQL文件内容为准') }}）
       </span>
     </template>
     <div class="sql-execute-local-file">
@@ -28,10 +28,10 @@
           <DbIcon
             style="margin-right: 3px;"
             type="add" />
-          <span>{{ $t('添加文件') }}</span>
+          <span>{{ t('添加文件') }}</span>
         </BkButton>
         <span style="margin-left: 12px; font-size: 12px; color: #8a8f99;">
-          {{ $t('仅支持_sql文件_文件名不能包含空格_上传后_SQL执行顺序默认为从上至下_可拖动文件位置_变换文件的执行顺序文件') }}
+          {{ t('仅支持_sql文件_文件名不能包含空格_上传后_SQL执行顺序默认为从上至下_可拖动文件位置_变换文件的执行顺序文件') }}
         </span>
       </div>
       <div
@@ -253,23 +253,41 @@
       return;
     }
     const fileNameList: Array<string> = [];
-    const fileDataMap = {} as Record<string, IFileData>;
+    const currentFileDataMap = {} as Record<string, IFileData>;
     const params = new FormData();
 
 
     Array.from(files).forEach((curFile) => {
-      params.append('sql_files', curFile);
       fileNameList.push(curFile.name);
-      fileDataMap[curFile.name] = createFileData({
+      currentFileDataMap[curFile.name] = createFileData({
         file: curFile,
         isUploading: true,
       });
+
+      // 上传文件大小限制 1GB (1024 * 1024 * 1024 = 1073741824)
+      if (curFile.size > 1073741824) {
+        currentFileDataMap[curFile.name] = {
+          ...currentFileDataMap[curFile.name],
+          realFilePath: '/',
+          isSuccess: true,
+          content: '--',
+          messageList: [],
+          isCheckFailded: true,
+          isUploadFailed: true,
+          isUploading: false,
+          uploadErrorMessage: t('文件上传失败——文件大小超过限制（最大为1GB）'),
+          grammarCheck: undefined,
+
+        };
+        return;
+      }
+      params.append('sql_files', curFile);
     });
 
     uploadFileNameList.value = _.uniq([...uploadFileNameList.value, ...fileNameList]);
     uploadFileDataMap.value = {
       ...uploadFileDataMap.value,
-      ...fileDataMap,
+      ...currentFileDataMap,
     };
 
     if (!selectFileName.value || !uploadFileDataMap.value[selectFileName.value]) {

diff --git a/...ws/mysql/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue b/...ws/mysql/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue
@@ -15,7 +15,9 @@
   <div
     v-if="(data.messageList.length < 1 && data.grammarCheck?.isError) || data.isUploadFailed"
     class="sql-execute-upload-check-error">
-    <span>{{ data.grammarCheck?.isError ? t('SQL语法错误') : t('文件上传失败') }}</span>
+    <span v-if="data.grammarCheck?.isError">{{ t('SQL语法错误') }}</span>
+    <span v-else-if="data.uploadErrorMessage">{{ data.uploadErrorMessage }}</span>
+    <span v-else>{{ t('文件上传失败') }}</span>
   </div>
 </template>
 <script setup lang="ts">

diff --git a/...iews/mysql/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue b/...iews/mysql/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue
@@ -14,9 +14,9 @@
 <template>
   <div class="sql-execute-sql-file-list">
     <div class="file-list-title">
-      <span>{{ $t('文件列表') }}</span>
+      <span>{{ t('文件列表') }}</span>
       <span style="font-size: 12px; font-weight: normal;color: #979ba5;">
-        {{ $t('按顺序执行') }}
+        {{ t('按顺序执行') }}
       </span>
     </div>
     <div class="file-list">
@@ -68,7 +68,7 @@
                     type="drag" />
                 </div>
                 <div
-                  v-bk-tooltips="$t('移除')"
+                  v-bk-tooltips="t('移除')"
                   class="action-btn remove-btn"
                   @click.stop="handleRemove(fileItemData.name)">
                   <DbIcon
@@ -89,22 +89,24 @@
   import type GrammarCheckModel from '@services/model/sql-import/grammar-check';
 
   export interface IFileData {
-    isSuccess: boolean,
-    isCheckFailded: boolean,
-    isUploading: boolean,
-    isUploadFailed: boolean,
-    file: File | null,
-    content: string,
-    messageList: GrammarCheckModel['messageList'],
-    grammarCheck?: GrammarCheckModel,
-    realFilePath: string,
+    isSuccess: boolean;
+    isCheckFailded: boolean;
+    isUploading: boolean;
+    isUploadFailed: boolean;
+    uploadErrorMessage: string;
+    file: File | null;
+    content: string;
+    messageList: GrammarCheckModel['messageList'];
+    grammarCheck?: GrammarCheckModel;
+    realFilePath: string;
   }
 
   export const createFileData = (data = {} as Partial<IFileData>) => ({
     isSuccess: data.isSuccess || false,
     isCheckFailded: data.isCheckFailded === undefined,
     isUploading: data.isUploading || false,
     isUploadFailed: data.isUploadFailed || false,
+    uploadErrorMessage: data.uploadErrorMessage || '',
     file: data.file || null,
     content: data.content || '',
     messageList: data.messageList || [],
@@ -115,10 +117,8 @@
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
-  import {
-    ref,
-    watch,
-  } from 'vue';
+  import { ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
 
   interface Props {
     modelValue: string,
@@ -136,7 +136,9 @@
 
   const emits = defineEmits<Emits>();
 
-  const localList = ref<Array<Record<'id'|'name', string>>>([]);
+  const { t } = useI18n();
+
+  const localList = ref<Array<Record<'id' | 'name', string>>>([]);
 
   watch(() => props.data, () => {
     localList.value = props.data.map(fileName => ({

diff --git a/.../src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue b/.../src/views/spider-manage/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
@@ -30,8 +30,12 @@
             type="add" />
           <span>{{ t('添加文件') }}</span>
         </BkButton>
-        <span style="margin-left: 12px; font-size: 12px; color: #8a8f99;">
-          {{ t('仅支持_sql文件_文件名不能包含空格_上传后_SQL执行顺序默认为从上至下_可拖动文件位置_变换文件的执行顺序文件') }}
+        <span style="margin-left: 12px; font-size: 12px; color: #8a8f99">
+          {{
+            t(
+              '仅支持_sql文件_文件名不能包含空格_上传后_SQL执行顺序默认为从上至下_可拖动文件位置_变换文件的执行顺序文件',
+            )
+          }}
         </span>
       </div>
       <div
@@ -83,6 +87,8 @@
   import { grammarCheck } from '@services/source/sqlImport';
   import { getFileContent } from '@services/source/storage';
 
+  import { getSQLFilename } from '@utils';
+
   import { updateFilePath } from '../../../Index.vue';
   import Editor from '../editor/Index.vue';
 
@@ -105,8 +111,6 @@
   const props = defineProps<Props>();
   const emits = defineEmits<Emits>();
 
-  const getLocalFileNamefromUploadFileName = (uploadFileName: string) => uploadFileName.replace(/[^_]+_/, '');
-
   const { t } = useI18n();
 
   let isKeepAliveActive = false;
@@ -161,7 +165,7 @@
       file_path: `${updateFilePath.value}/${fileName}`,
     })
       .then((data) => {
-        fileDataMap[getLocalFileNamefromUploadFileName(fileName)].content = data.content;
+        fileDataMap[getSQLFilename(fileName)].content = data.content;
         uploadFileDataMap.value = fileDataMap;
       })
       .finally(() => {
@@ -185,7 +189,7 @@
 
     props.modelValue.forEach((filePath: string) => {
       // 本地 SQL 文件上传后会拼接随机数前缀，需要解析正确的文件名
-      const localFileName = getLocalFileNamefromUploadFileName(filePath);
+      const localFileName = getSQLFilename(filePath);
       localFileNameList.push(localFileName);
       filePathMap[localFileName] = filePath;
     });
@@ -253,23 +257,41 @@
       return;
     }
     const fileNameList: Array<string> = [];
-    const fileDataMap = {} as Record<string, IFileData>;
+    const currentFileDataMap = {} as Record<string, IFileData>;
     const params = new FormData();
 
 
     Array.from(files).forEach((curFile) => {
-      params.append('sql_files', curFile);
       fileNameList.push(curFile.name);
-      fileDataMap[curFile.name] = createFileData({
+      currentFileDataMap[curFile.name] = createFileData({
         file: curFile,
         isUploading: true,
       });
+
+      // 上传文件大小限制 1GB (1024 * 1024 * 1024 = 1073741824)
+      if (curFile.size > 1073741824) {
+        currentFileDataMap[curFile.name] = {
+          ...currentFileDataMap[curFile.name],
+          realFilePath: '/',
+          isSuccess: true,
+          content: '--',
+          messageList: [],
+          isCheckFailded: true,
+          isUploadFailed: true,
+          isUploading: false,
+          uploadErrorMessage: t('文件上传失败——文件大小超过限制（最大为1GB）'),
+          grammarCheck: undefined,
+
+        };
+        return;
+      }
+      params.append('sql_files', curFile);
     });
 
     uploadFileNameList.value = _.uniq([...uploadFileNameList.value, ...fileNameList]);
     uploadFileDataMap.value = {
       ...uploadFileDataMap.value,
-      ...fileDataMap,
+      ...currentFileDataMap,
     };
 
     if (!selectFileName.value || !uploadFileDataMap.value[selectFileName.value]) {
@@ -294,7 +316,6 @@
           };
         });
         uploadFileDataMap.value = lastUploadFileDataMap;
-
         triggerChange();
       })
       .catch(() => {

diff --git a/...r-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue b/...r-manage/sql-execute/steps/step1/components/sql-file/local-file/components/CheckError.vue
@@ -15,7 +15,9 @@
   <div
     v-if="(data.messageList.length < 1 && data.grammarCheck?.isError) || data.isUploadFailed"
     class="sql-execute-upload-check-error">
-    <span>{{ data.grammarCheck?.isError ? t('SQL语法错误') : t('文件上传失败') }}</span>
+    <span v-if="data.grammarCheck?.isError">{{ t('SQL语法错误') }}</span>
+    <span v-else-if="data.uploadErrorMessage">{{ data.uploadErrorMessage }}</span>
+    <span v-else>{{ t('文件上传失败') }}</span>
   </div>
 </template>
 <script setup lang="ts">

diff --git a/...der-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue b/...der-manage/sql-execute/steps/step1/components/sql-file/local-file/components/FileList.vue
@@ -84,28 +84,29 @@
   </div>
 </template>
 <script lang="ts">
-  import { useI18n } from 'vue-i18n';
   import Vuedraggable from 'vuedraggable';
 
   import type GrammarCheckModel from '@services/model/sql-import/grammar-check';
 
   export interface IFileData {
-    isSuccess: boolean,
-    isCheckFailded: boolean,
-    isUploading: boolean,
-    isUploadFailed: boolean,
-    file: File | null,
-    content: string,
-    messageList: GrammarCheckModel['messageList'],
-    grammarCheck?: GrammarCheckModel,
-    realFilePath: string,
+    isSuccess: boolean;
+    isCheckFailded: boolean;
+    isUploading: boolean;
+    isUploadFailed: boolean;
+    uploadErrorMessage: string;
+    file: File | null;
+    content: string;
+    messageList: GrammarCheckModel['messageList'];
+    grammarCheck?: GrammarCheckModel;
+    realFilePath: string;
   }
 
   export const createFileData = (data = {} as Partial<IFileData>) => ({
     isSuccess: data.isSuccess || false,
     isCheckFailded: data.isCheckFailded === undefined,
     isUploading: data.isUploading || false,
     isUploadFailed: data.isUploadFailed || false,
+    uploadErrorMessage: data.uploadErrorMessage || '',
     file: data.file || null,
     content: data.content || '',
     messageList: data.messageList || [],
@@ -116,10 +117,8 @@
 </script>
 <script setup lang="ts">
   import _ from 'lodash';
-  import {
-    ref,
-    watch,
-  } from 'vue';
+  import { ref, watch } from 'vue';
+  import { useI18n } from 'vue-i18n';
 
   interface Props {
     modelValue: string,