使用版本

后端

• spring-boot 3.3.0
• jdk17

前端

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

文件上傳

上傳文件比較簡(jiǎn)單。一般前端傳文件流（二進(jìn)制）到后端，后端處理文件流保存到目標(biāo)位置即可！

服務(wù)端

MultipartFile是SpringMVC提供簡(jiǎn)化上傳操作的工具類。
主要是使用 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去保存文件信息，
• 設(shè)置類型’Content-Type’: ‘multipart/form-data’

formData可以存儲(chǔ)二進(jìn)制文件、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>

方式二

就很簡(jiǎn)單了，直接使用elment-plus的上傳組件。
使用這種方式多文件上傳時(shí)- 其實(shí)是一個(gè)一個(gè)的上傳的。并不是一下子上傳。

<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>

文件下載

下載文件一般都是處理文件流。
通常使用一個(gè)byte數(shù)組（字節(jié)數(shù)組）來存放文件流中的數(shù)據(jù)，每次存取byte數(shù)組的長(zhǎng)度個(gè)數(shù)據(jù)。然后放到輸出流中。
重復(fù)以上動(dòng)作，直到文件流處理完成！

就像是個(gè)搬運(yùn)工，每次搬運(yùn)指定字節(jié)的數(shù)據(jù)，從輸入流到輸出流直到搬完。

服務(wù)端

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

客戶端（前端）

發(fā)起請(qǐng)求，需要明確返回?cái)?shù)據(jù)的類型是 blob，添加responseType: ‘blob’
拿到返回流后，通過URL.createObjectURL處理文件流，生成一個(gè)url，供a標(biāo)簽進(jìn)行下載！
下載完成后需要移除。

function sendRequest() {axios.get('/api/ceel/download?fileName=模板-財(cái)源系統(tǒng)', {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', '模板-財(cái)源系統(tǒng).xlsx');document.body.appendChild(link);link.click();document.body.removeChild(link);}).catch(function (error) {console.log(error);});
}

代碼倉(cāng)庫(kù)地址

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

路徑為

package com.example.practicejava.file;