首先，在Java的后端代码中，我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例：
-
文件上传
首先，我们需要在html页面上创建一个表单，其中包含一个file类型的输入字段：
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit">上传文件</button>
</form>然后，在后端代码中，我们可以使用Spring框架的MultipartFile类来处理上传的文件，并将其保存到服务器上：
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
Path path = Paths.get("/path/to/upload/dir/" + file.getOriginalFilename());
Files.write(path, bytes);
return "上传成功：" + file.getOriginalFilename();
} catch (IOException e) {
e.printStackTrace();
return "上传失败：" + file.getOriginalFilename();
}
} else {
return "上传失败：请选择要上传的文件！";
}
}在这个例子中，我们首先检查上传的文件是否为空，如果不为空，就读取文件的字节数据，并使用Files.write()方法将其写入指定的路径。
-
文件下载
对于文件下载，我们可以使用Spring框架的ResponseEntity类来将文件内容作为响应体返回给前端。以下是一个示例代码：
@ResponseBody
public ResponseEntity<byte[]> downloadFile(@PathVariable String fileName) {
File file = new File("/path/to/download/dir/" + fileName);
if (file.exists()) {
try {
byte[] fileBytes = Files.readAllBytes(file.toPath());
HttpHeaders headers = new HttpHeaders();
headers.add("Content-Disposition", "attachment; filename=" + fileName);
ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(fileBytes, headers, HttpStatus.OK);
return responseEntity;
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}在这个例子中，我们首先检查指定的文件是否存在。如果存在，我们就使用Files.readAllBytes()方法读取文件内容生成byte数组，并将其设置为响应体的内容。同时，我们还需要设置响应头信息，告诉浏览器将该响应的内容作为下载文件。
在vue前端代码中，我们可以使用axios发送POST请求来上传文件，使用window.open()方法来实现文件下载。以下是一个示例代码：
-
文件上传
<template>
<div>
<input type="file" @change="uploadFile">
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
uploadFile(e) {
let formData = new FormData()
formData.append('file', e.target.files[0])
axios.post('/upload', formData)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error.response.data)
})
}
}
}
</script>在这个例子中，我们只需要监听文件选择框的change事件，获取用户选择的文件，并使用FormData对象创建一个包含文件的表单数据。然后，我们使用axios.post()方法将表单数据发送给服务器。
-
文件下载
<template>
<div>
<button @click="downloadFile">下载文件</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile() {
let fileName = 'example.txt' // 要下载的文件名
window.open('/download/' + fileName)
}
}
}
</script>在这个例子中，我们只需要在按钮的click事件中调用window.open()方法，并将要下载的文件名拼接到URL中即可。由于文件下载是浏览器自身的行为，因此我们无法通过JavaScript代码直接控制，只能将该操作委托给浏览器处理。
参考文章：http://blog.ncmem.com/wordpress/2023/10/26/%e5%bc%80%e5%8f%91%e5%ae%9e%e4%be%8b%ef%bc%9a%e5%90%8e%e7%ab%afjava%e5%92%8c%e5%89%8d%e7%ab%afvue%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/
欢迎入群一起讨论
