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

This commit is contained in:
haifeng414 2020-02-12 20:55:02 +08:00
parent 1c1d419852
commit a732a7291b
4 changed files with 113 additions and 9 deletions

View File

@ -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);
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
},
},