石家庄 科技 公司 网站建设2345网址导航智能主板

使用版本

后端

• spring-boot 3.3.0
• jdk17

前端

• vue “^3.3.11”
• vite “^5.0.8”
• axios “^1.7.2”

文件上传

上传文件比较简单。一般前端传文件流（二进制）到后端，后端处理文件流保存到目标位置即可！

服务端

MultipartFile是SpringMVC提供简化上传操作的工具类。
主要是使用 MultipartFile 的 transferTo 方法。

这里使用了MultipartFile[] 表示支持多文件上传

@PostMapping(path = {"/upload"})
public void getMs(@RequestPart("file") MultipartFile[] files) throws IOException {for (MultipartFile file : files){String fileName = file.getOriginalFilename();File dest = new File("/Users/cyq/Downloads/" + fileName);file.transferTo(dest);}
}

客户端（前端）

方式一

使用原生上传

需要注意的是

• 用formData去保存文件信息，
• 设置类型’Content-Type’: ‘multipart/form-data’

formData可以存储二进制文件、blob等类型，

<script setup>
import { ref } from 'vue'
import axios from 'axios'function sendRequest(file) {const formData = new FormData();formData.append('file', file[0]);formData.append('file', file[1]);axios.post('/api/ceel/hi', formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
}function getFile(event){const files =  event.target.filesconsole.log(files);sendRequest(files)
}
</script><template><input v-on:change="getFile" multiple="multiple" type="file" />
</template>

方式二

就很简单了，直接使用elment-plus的上传组件。
使用这种方式多文件上传时- 其实是一个一个的上传的。并不是一下子上传。

<script setup>
import { ref } from 'vue'
const fileList = ref([])
</script><template>
<el-upload multipleaction="/api/ceel/hi"v-model:file-list="fileList"
><el-button type="primary">上传文件</el-button>
</el-upload>
</template>

文件下载

下载文件一般都是处理文件流。
通常使用一个byte数组（字节数组）来存放文件流中的数据，每次存取byte数组的长度个数据。然后放到输出流中。
重复以上动作，直到文件流处理完成！

就像是个搬运工，每次搬运指定字节的数据，从输入流到输出流直到搬完。

服务端

@GetMapping("/download")
public void download(String fileName, HttpServletResponse response) throws IOException {String _u = "/Users/cyq/Downloads/";String filePath = _u + fileName + ".xlsx";File file = new File(filePath);response.setContentType("application/octet-stream");// 告知浏览器文件大小response.addHeader("Content-Length", "" + file.length()); response.setHeader("content-disposition","attachment;fileName="+ URLEncoder.encode(file.getName(), "UTF-8"));FileInputStream inputStream = new FileInputStream(file);ServletOutputStream outputStream = response.getOutputStream();try (inputStream; outputStream){byte[] buffer = new byte[1024];int len;while ((len = inputStream.read(buffer)) > 0){outputStream.write(buffer, 0, len);}}
}

客户端（前端）

发起请求，需要明确返回数据的类型是 blob，添加responseType: ‘blob’
拿到返回流后，通过URL.createObjectURL处理文件流，生成一个url，供a标签进行下载！
下载完成后需要移除。

function sendRequest() {axios.get('/api/ceel/download?fileName=模板-财源系统', {responseType: 'blob'}).then(function (response) {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', '模板-财源系统.xlsx');document.body.appendChild(link);link.click();document.body.removeChild(link);}).catch(function (error) {console.log(error);});
}

代码仓库地址

• 后端代码 https://github.com/Mrceel/java-demo.git

路径为

package com.example.practicejava.file;