上传文件并输出到控制台

backend/src/main/java/io/metersphere/controller/TestPlanController.java

@@ -0,0 +1,22 @@
+package io.metersphere.controller;
+
+import io.metersphere.service.FileService;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import javax.annotation.Resource;
+import java.io.IOException;
+
+@RestController
+@RequestMapping(value = "/testplan")
+public class TestPlanController {
+    @Resource
+    private FileService fileService;
+
+    @PostMapping("/file/upload")
+    public void upload(MultipartFile file) throws IOException {
+        fileService.upload(file.getOriginalFilename(), file);
+    }
+}

backend/src/main/java/io/metersphere/service/FileService.java

@@ -0,0 +1,18 @@
+package io.metersphere.service;
+
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStreamReader;
+import java.util.stream.Collectors;
+
+@Service
+public class FileService {
+    public void upload(String name, MultipartFile file) throws IOException {
+        String result = new BufferedReader(new InputStreamReader(file.getInputStream()))
+                .lines().collect(Collectors.joining("\n"));
+        System.out.println(String.format("upload file: %s, content: \n%s", name, result));
+    }
+}

frontend/src/performance/components/testPlan/CreateTestPlan.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <el-tabs v-model="active">
+  <div class="testplan-container">
+    <el-tabs v-model="active" type="border-card" :stretch="true">
       <el-tab-pane
         v-for="item in tabs"
         :key="item.id"
@@ -44,3 +44,10 @@
     }
   }
 </script>
+
+<style>
+  .testplan-container .el-tabs__nav {
+    float: none;
+    text-align: center;
+  }
+</style>

frontend/src/performance/components/testPlan/components/BasicConfig.vue

@@ -1,16 +1,22 @@
-<style>
-
-</style>
-
 <template>
-  <div>我是第一个子组件</div>
+  <el-upload
+    accept=".jmx"
+    drag
+    :action="jmxUploadPath">
+    <i class="el-icon-upload"/>
+    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    <div class="el-upload__tip" slot="tip">只能上传jmx文件</div>
+  </el-upload>
 </template>
 
 <script>
   export default {
     data() {
       return {
-      }
+        jmxUploadPath: '/testplan/file/upload',
+      };
+    },
+    methods: {
     }
   }
 </script>