文件下载和删除的前端逻辑

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

@@ -1,12 +1,18 @@
 package io.metersphere.controller;
 
+import io.metersphere.requests.testplan.FileOperationRequest;
 import io.metersphere.service.FileService;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 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 javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 
 @RestController
@@ -16,7 +22,22 @@ public class TestPlanController {
     private FileService fileService;
 
     @PostMapping("/file/upload")
-    public void upload(MultipartFile file) throws IOException {
+    public void uploadJmx(MultipartFile file) throws IOException {
         fileService.upload(file.getOriginalFilename(), file);
     }
+
+    @PostMapping("/file/delete")
+    public void deleteJmx(@RequestBody FileOperationRequest request) {
+        System.out.println(String.format("delete %s", request.getName()));
+    }
+
+    @PostMapping("/file/download")
+    public ResponseEntity<org.springframework.core.io.Resource> downloadJmx(@RequestBody FileOperationRequest fileOperationRequest, HttpServletResponse response) {
+        org.springframework.core.io.Resource resource = fileService.loadFileAsResource(fileOperationRequest.getName());
+
+        return ResponseEntity.ok()
+                .contentType(MediaType.parseMediaType("application/octet-stream"))
+                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileOperationRequest.getName() + "\"")
+                .body(resource);
+    }
 }

backend/src/main/java/io/metersphere/requests/testplan/FileOperationRequest.java

@@ -0,0 +1,13 @@
+package io.metersphere.requests.testplan;
+
+public class FileOperationRequest {
+    private String name;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}

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

@@ -1,18 +1,41 @@
 package io.metersphere.service;
 
+import org.springframework.core.io.InputStreamResource;
+import org.springframework.core.io.Resource;
 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.Map;
+import java.util.concurrent.ConcurrentHashMap;
 import java.util.stream.Collectors;
 
 @Service
 public class FileService {
+    // 将上传的文件保存在内存，方便测试
+    private Map<String, MultipartFile> fileMap = new ConcurrentHashMap<>();
+
     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));
+
+        fileMap.put(name, file);
+    }
+
+    public Resource loadFileAsResource(String name) {
+        final MultipartFile file = fileMap.get(name);
+
+        if (file != null) {
+            try {
+                return new InputStreamResource(file.getInputStream());
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
+
+        return null;
     }
 }

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

@@ -3,6 +3,7 @@
     <el-upload
       accept=".jmx"
       drag
+      :limit="1"
       :show-file-list="false"
       :action="jmxUploadPath"
       :before-upload="beforeUpload"
@@ -42,7 +43,7 @@
         label="操作">
         <template slot-scope="scope">
           <el-button @click="handleDownload(scope.row)" type="text" size="small">下载</el-button>
-          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
+          <el-button @click="handleDelete(scope.row, scope.$index)" type="text" size="small">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -54,6 +55,8 @@
     data() {
       return {
         jmxUploadPath: '/testplan/file/upload',
+        jmxDownloadPath: '/testplan/file/download',
+        jmxDeletePath: '/testplan/file/delete',
         fileList: [],
         tableData: [],
       };
@@ -77,17 +80,61 @@
 
         return true;
       },
-      handleDownload(row) {
-        /// todo
-        window.console.log("download: " + row);
+      handleDownload(file) {
+        let data = {
+          name: file.name
+        };
+
+        this.$post(this.jmxDownloadPath, data).then(response => {
+          if (response) {
+            const content = response.data;
+            const blob = new Blob([content]);
+            if ("download" in document.createElement("a")) {
+              // 非IE下载
+              //  chrome/firefox
+              let aTag = document.createElement('a');
+              aTag.download = file.name;
+              aTag.href = URL.createObjectURL(blob)
+              aTag.click();
+              URL.revokeObjectURL(aTag.href)
+            } else {
+              // IE10+下载
+              navigator.msSaveBlob(blob, this.filename)
+            }
+          }
+        }).catch((response) => {
+            this.$message.error(response.message);
+          });
       },
-      handleDelete(row) {
-        /// todo
-        window.console.log("delete: " + row);
+      handleDelete(file, index) {
+        this.$alert('确认删除文件: ' + file.name + "？", '', {
+          confirmButtonText: '确定',
+          callback: () => {
+            this._handleDelete(file, index);
+          }
+        });
+      },
+      _handleDelete(file, index) {
+        let data = {
+          name: file.name
+        };
+
+        this.$post(this.jmxDeletePath, data).then(response => {
+          if (response.data.success) {
+            this.fileList.splice(index, 1);
+            this.tableData.splice(index, 1);
+
+            this.$message({
+              message: '删除成功！',
+              type: 'success'
+            });
+          } else {
+            this.$message.error(response.message);
+          }
+        });
       },
       fileValidator(file) {
         /// todo: 是否需要对文件内容和大小做限制
-
         return file.size > 0;
       },
     },