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

ssssssss-team · Aug 14, 2021 · 60ebfc4 · 60ebfc4
1 parent 3861811
commit 60ebfc4
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 26 deletions.
diff --git a/magic-editor/src/console/src/components/common/magic-file.vue b/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>
diff --git a/magic-editor/src/console/src/components/editor/magic-script-editor.vue b/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()

diff --git a/magic-editor/src/console/src/components/layout/magic-header.vue b/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({

diff --git a/magic-editor/src/console/src/components/layout/magic-request.vue b/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,