feat: support to upload file from file manger

console/atest-ui/src/App.vue

@@ -16,6 +16,7 @@ import MockManager from './views/MockManager.vue'
 import StoreManager from './views/StoreManager.vue'
 import SecretManager from './views/SecretManager.vue'
 import WelcomePage from './views/WelcomePage.vue'
+import FileManage from './views/FileManager.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t, locale: i18nLocale } = useI18n()
@@ -121,6 +122,10 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
           <el-icon><location /></el-icon>
           <template #title>{{ t('title.stores') }}</template>
         </el-menu-item>
+        <el-menu-item index="file">
+          <el-icon><document /></el-icon>
+          <template #title>{{ t('title.files') }}</template>
+        </el-menu-item>
       </el-menu>
     </el-aside>
 
@@ -144,6 +149,7 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />
       <SecretManager v-else-if="panelName === 'secret'" />
+      <FileManage v-else-if="panelName === 'file'" />
       <WelcomePage v-else />
     </el-main>
 
@@ -157,4 +163,4 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
 .el-menu-vertical:not(.el-menu--collapse) {
   width: 200px;
 }
-</style>
+</style>

console/atest-ui/src/locales/en.json

@@ -47,6 +47,7 @@
         "welcome": "Welcome",
         "secrets": "Secrets",
         "stores": "Stores",
+        "files": "Files",
         "templateQuery": "Template Functions Query",
         "output": "Output"
     },

console/atest-ui/src/locales/zh.json

@@ -41,6 +41,7 @@
         "welcome": "欢迎",
         "secrets": "凭据",
         "stores": "存储",
+        "files": "文件",
         "parameter": "参数",
         "templateQuery": "模板函数查询",
         "output": "输出"

console/atest-ui/src/views/FileManager.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const fileLists = ref([])
+
+onMounted(() => {
+  const savedFile = localStorage.getItem("fileLists")
+  if (savedFile) {
+    fileLists.value = JSON.parse(savedFile)
+  }
+})
+
+const handleFileUpload = (file) => {
+  const reader = new FileReader()
+
+  reader.onload = (e: any) => {
+    const fileData = {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      content: e.target.result // 文件内容作为 Base64 字符串
+    }
+
+    fileLists.value.push(fileData) // 将文件信息推入fileList
+
+    localStorage.setItem('fileLists', JSON.stringify(fileLists.value)) // 存入localStorage
+
+    ElMessage({
+      message: '文件上传成功',
+      type: 'success'
+    })
+  }
+
+  reader.readAsDataURL(file.raw) // 读取文件内容为Base64编码
+  return false
+}
+
+const deleteFile = (file) => {
+  const index = fileLists.value.findIndex(item => item.name === file.name)
+  if (index !== -1) {
+    fileLists.value.splice(index, 1)
+    localStorage.setItem('fileLists', JSON.stringify(fileLists.value))
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <h2>文件管理器</h2>
+
+    <el-upload
+      action="#"
+      :auto-upload="false"
+      :on-change="handleFileUpload"
+      :on-remove="deleteFile"
+      :file-list="fileLists"
+      multiple
+    >
+      <el-button type="primary">点击上传</el-button>
+      <template #tip>
+        <div class="el-upload__tip">
+          可以上传任意类型的文件
+        </div>
+      </template>
+    </el-upload>
+
+  </div>
+</template>

console/atest-ui/src/views/TestCase.vue

@@ -242,7 +242,8 @@ const emptyTestCaseWithSuite: TestCaseWithSuite = {
       cookie: [],
       form: [],
       body: '',
-      filepath: ''
+      filepath: '',
+      filename: ''
     },
     response: {
       statusCode: 0,
@@ -337,7 +338,6 @@ function determineBodyType(e: TestCase) {
           break
         case 'multipart/form-data':
           bodyType.value = 6
-
           e.request.form.forEach(fItem => {
             if (fItem.key !== '' && fItem.key !== '') {
               e.request.filepath = fItem.key + "=" + fItem.value
@@ -634,6 +634,7 @@ const deleteAllHistory = async (formEl) => {
 }
 
 const options = GetHTTPMethods()
+const fileLists = ref([])
 const requestActiveTab = ref(Cache.GetPreference().requestActiveTab)
 watch(requestActiveTab, Cache.WatchRequestActiveTab)
 Magic.Keys(() => {
@@ -721,6 +722,22 @@ function formChange() {
   }
 }
 
+function handleSelectChange() {
+  const items = testCaseWithSuite.value.data.request.filename
+  if (items) {
+    testCaseWithSuite.value.data.request.form = [{
+          key: "file",
+          value: items
+        } as Pair]
+
+    const file = fileLists.value.find((e) => e.value === items)
+    if (file) {
+      const content = file.content.split(',')[1]
+      testCaseWithSuite.value.data.request.body = atob(content)
+    }
+  }
+}
+
 const filepathChange = () => {
   const items = testCaseWithSuite.value.data.request.filepath.split("=")
       if (items && items.length > 1) {
@@ -730,6 +747,7 @@ const filepathChange = () => {
         } as Pair]
       }
 }
+
 const bodyType = ref(1)
 function bodyTypeChange(e: number) {
   let contentType = ""
@@ -744,6 +762,20 @@ function bodyTypeChange(e: number) {
       contentType = 'multipart/form-data'
       filepathChange()
       break;
+    case 7:
+      // 获取localStorage中的数据
+      const savedFiles = localStorage.getItem('fileLists')
+      if (savedFiles) {
+        const fileList = JSON.parse(savedFiles)
+        console.log(fileList)
+        fileLists.value = fileList.map(file => ({
+          label: file.name,
+          value: file.name,
+          content: file.content,
+          disabled: false
+        }))
+      }
+      break;
   }
 
   if (contentType !== "") {
@@ -1020,9 +1052,23 @@ Magic.Keys(() => {
             <el-radio :label="4">x-www-form-urlencoded</el-radio>
             <el-radio :label="5">JSON</el-radio>
             <el-radio :label="6">EmbedFile</el-radio>
+            <el-radio-button :label="7">UploadFile</el-radio-button>
           </el-radio-group>
 
           <div style="flex-grow: 1;">
+            <el-select v-if="bodyType === 7" 
+              v-model="testCaseWithSuite.data.request.filename" 
+              @change="handleSelectChange"
+              placeholder="Select" 
+              style="width: 240px">
+              <el-option
+                v-for="item in fileLists"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
             <div v-if="bodyType === 6">
               <el-row>
                 <el-col :span="4">Filename:</el-col>

console/atest-ui/src/views/types.ts

@@ -68,6 +68,7 @@ export interface TestCaseRequest {
   form: Pair[]
   body: string
   filepath: string
+  filename: string
 }
 
 export interface TestCaseResponse {
@@ -187,4 +188,4 @@ export function FlattenObject(obj: any): any {
     acc[pair[0]] = pair[1]
     return acc
   }, {})
-}
+}