新增支持在测试时上传文件

magic-editor/src/console/src/components/common/magic-file.vue

@@ -0,0 +1,56 @@
+<template>
+  <div style="width: 100%">
+    <input type="file" style="display: none" ref="file" @change="onFileSelected" :accept="accept" :multiple="multiple">
+    <magic-input icon="upload" :readonly="true" style="width: 100%" placeholder="未选择文件" :onClick="choseFile" :value="filename"/>
+  </div>
+</template>
+
+<script>
+import MagicInput from './magic-input'
+export default {
+  name: 'MagicFile',
+  components: { MagicInput },
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    accept: {
+      type: String,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [FileList, String]
+    },
+    width: {
+      type: String
+    }
+  },
+  data(){
+    return {
+      filename: null
+    }
+  },
+  methods: {
+    getFiles(){
+      return this.$refs.file.files;
+    },
+    getFile(){
+      return this.$refs.file.files[0];
+    },
+    onFileSelected(){
+      if (this.$refs.file.files[0]) {
+        this.filename = Array.from(this.$refs.file.files).map(it => it.name).join(',');
+      }
+      this.$emit('update:value', this.$refs.file.files)
+    },
+    choseFile(){
+      this.$refs.file.click();
+    }
+  }
+}
+</script>

magic-editor/src/console/src/components/editor/magic-script-editor.vue

@@ -440,7 +440,14 @@ export default {
       delete saveObj.responseHeader
       delete saveObj.running
       // saveObj.responseHeader = JSON.stringify(saveObj.responseHeader)
-      saveObj.parameters = saveObj.parameters.filter(it => it.name)
+      saveObj.parameters = saveObj.parameters.filter(it => it.name).map(it => {
+        if(it.value instanceof FileList){
+          let temp = {...it};
+          delete temp.value;
+          return temp;
+        }
+        return it;
+      })
       saveObj.paths = saveObj.paths.filter(it => it.name)
       saveObj.headers = saveObj.headers.filter(it => it.name)
       saveObj.option = JSON.stringify(saveObj.option)
@@ -648,6 +655,19 @@ export default {
       requestConfig.headers[contants.HEADER_REQUEST_SESSION] = sessionId
       requestConfig.headers[contants.HEADER_MAGIC_TOKEN] = contants.HEADER_MAGIC_TOKEN_VALUE
       this.mergeGlobalSettings(requestConfig)
+      if(requestConfig.data && Object.values(requestConfig.data).some(it => it instanceof FileList)){
+        requestConfig.headers['Content-Type'] = 'multipart/form-data';
+        let formData = new FormData()
+        Object.keys(requestConfig.data).forEach(key => {
+          let value = requestConfig.data[key];
+          if(value instanceof FileList){
+            value.forEach(file => formData.append(key, file, file.name))
+          }else{
+            formData.append(key, value);
+          }
+        });
+        requestConfig.data = formData;
+      }
       requestConfig.headers[contants.HEADER_REQUEST_BREAKPOINTS] = this.editor
           .getModel()
           .getAllDecorations()

magic-editor/src/console/src/components/layout/magic-header.vue

@@ -39,9 +39,7 @@
     </div>
     <magic-dialog title="上传接口" :value="showUploadDialog" align="right" @onClose="showUploadDialog = false">
       <template #content>
-        <input type="file" style="display: none" ref="file" @change="onFileSelected" accept="application/zip">
-        <magic-input icon="upload" :readonly="true" width="235px" placeholder="未选择文件" :onClick="choseFile"
-                     :value="filename"/>
+        <magic-file ref="uploadFile" placeholder="未选择文件" />
       </template>
       <template #buttons>
         <button class="ma-button active" @click="() => doUpload('increment')">增量上传</button>
@@ -92,6 +90,7 @@ import store from '@/scripts/store.js'
 import request from '@/api/request.js'
 import MagicDialog from '@/components/common/modal/magic-dialog.vue'
 import MagicInput from '@/components/common/magic-input.vue'
+import MagicFile from '@/components/common/magic-file.vue'
 import MagicResourceChoose from '@/components/resources/magic-resource-choose.vue'
 import MagicSearch from './magic-search.vue'
 
@@ -101,6 +100,7 @@ export default {
     MagicDialog,
     MagicInput,
     MagicSearch,
+    MagicFile,
     MagicResourceChoose
   },
   props: {
@@ -116,7 +116,6 @@ export default {
       showUploadDialog: false,
       showPushDialog: false,
       exportVisible: false,
-      filename: null,
       target: 'http://host:port/_magic-api-sync',
       secretKey: '123456789',
       skinRight: 40 + 'px',
@@ -157,14 +156,6 @@ export default {
         });
       }
     },
-    onFileSelected() {
-      if (this.$refs.file.files[0]) {
-        this.filename = this.$refs.file.files[0].name;
-      }
-    },
-    choseFile() {
-      this.$refs.file.click();
-    },
     upload() {
       this.showUploadDialog = true;
     },
@@ -204,10 +195,10 @@ export default {
       }
     },
     doUpload(mode) {
-      let file = this.$refs.file.files[0];
+      let file = this.$refs.uploadFile.getFile();
       if (file) {
         let formData = new FormData();
-        formData.append('file', file, this.filename);
+        formData.append('file', file, file.name);
         formData.append('mode', mode);
         let _upload = () => {
           this.showUploadDialog = false;
@@ -224,8 +215,6 @@ export default {
             bus.$emit('status', `${mode === 'full' ? '全量': '增量'}上传成功`)
             bus.$emit('refresh-resource')
           })
-          this.filename = '';
-          this.$refs.file.value = '';
         }
         if (mode === 'full') {
           this.$magicConfirm({

magic-editor/src/console/src/components/layout/magic-request.vue

@@ -22,7 +22,7 @@
         <div v-show="showIndex === 0" class="ma-layout-container">
           <div class="ma-header ma-table-row ma-table-request-row">
             <div style="width: 32px">必填</div>
-            <div style="flex:1">Key</div>
+            <div style="width: 80px">Key</div>
             <div style="flex:1">Value</div>
             <div style="width:135px">参数类型</div>
             <div style="flex:1">默认值</div>
@@ -37,15 +37,15 @@
               <div style="width: 32px">
                 <magic-checkbox :focus="() => (parameterIndex = key)" :value.sync="item.required"/>
               </div>
-              <div :class="{ focus: parameterIndex === key && !item.name }" style="flex:1">
+              <div :class="{ focus: parameterIndex === key && !item.name }" style="width: 80px">
                 <magic-input :focus="() => (parameterIndex = key)" :value.sync="item.name" style="width: 100%"/>
               </div>
               <div style="flex:1">
-                <magic-input :focus="() => (parameterIndex = key)" :value.sync="item.value" style="width: 100%"/>
+                <magic-file v-if="item.dataType && item.dataType.startsWith('MultipartFile')" :focus="() => (parameterIndex = key)" :value.sync="item.value" :multiple="item.dataType === 'MultipartFiles'"/>
+                <magic-input v-else :focus="() => (parameterIndex = key)" :value.sync="item.value" style="width: 100%"/>
               </div>
               <div style="width: 135px">
-                <magic-select :border="false" :focus="() => (parameterIndex = key)" :options="types" :value.sync="item.dataType"
-                              default-value="String" style="width: 100%"/>
+                <magic-select :border="false" :focus="() => (parameterIndex = key)" :options="types" :value.sync="item.dataType" default-value="String" style="width: 100%"/>
               </div>
               <div style="flex:1">
                 <magic-input :focus="() => (parameterIndex = key)" :value.sync="item.defaultValue" style="width: 100%"/>
@@ -69,7 +69,7 @@
         <div v-show="showIndex === 1" class="ma-layout-container">
           <div class="ma-header ma-table-row ma-table-request-row">
             <div style="width:32px">必填</div>
-            <div style="flex:1">Key</div>
+            <div style="width: 80px">Key</div>
             <div style="flex:1">Value</div>
             <div style="width: 100px">参数类型</div>
             <div style="flex:1">默认值</div>
@@ -84,7 +84,7 @@
               <div style="width: 32px">
                 <magic-checkbox :focus="() => (headerIndex = key)" :value.sync="item.required"/>
               </div>
-              <div :class="{ focus: headerIndex === key && !item.name }" style="flex:1">
+              <div :class="{ focus: headerIndex === key && !item.name }" style="width: 80px">
                 <magic-input :focus="() => (headerIndex = key)" :value.sync="item.name" style="width: 100%"/>
               </div>
               <div style="flex:1">
@@ -116,7 +116,7 @@
 
         <div v-show="showIndex === 2" class="ma-layout-container">
           <div class="ma-header ma-table-row ma-table-request-row">
-            <div style="flex: 1">Key</div>
+            <div style="width: 80px">Key</div>
             <div style="flex: 1">Value</div>
             <div style="width: 100px">参数类型</div>
             <div style="width: 100px">验证方式</div>
@@ -127,7 +127,7 @@
           <div class="ma-content">
             <div v-for="(item, key) in info.paths" :key="'request_header_' + key"
                  class="ma-table-row ma-table-request-row">
-              <div :class="{ focus: pathIndex === key && !item.name }" style="flex:1">
+              <div :class="{ focus: pathIndex === key && !item.name }" style="width: 80px">
                 <magic-input :focus="() => (pathIndex = key)" :value.sync="item.name" style="width: 100%"/>
               </div>
               <div style="flex:1">
@@ -177,6 +177,7 @@
 
 <script>
   import MagicInput from '@/components/common/magic-input.vue'
+  import MagicFile from '@/components/common/magic-file.vue'
   import MagicSelect from '@/components/common/magic-select.vue'
   import MagicCheckbox from '@/components/common/magic-checkbox.vue'
   import MagicTextarea from '@/components/common/magic-textarea.vue'
@@ -195,6 +196,7 @@
     },
     components: {
       MagicInput,
+      MagicFile,
       MagicSelect,
       MagicTextarea,
       MagicCheckbox,