新手做导航网站,比 wordpress,做悬赏的网站,机械加工厂家文章目录 使用版本文件上传服务端客户端#xff08;前端#xff09;方式一方式二 文件下载服务端客户端#xff08;前端#xff09; 代码仓库地址 使用版本
后端
spring-boot 3.3.0jdk17
前端
vue “^3.3.11”vite “^5.0.8”axios “^1.7.2”
文件上传
上传文件比较… 文章目录 使用版本文件上传服务端客户端前端方式一方式二 文件下载服务端客户端前端 代码仓库地址 使用版本
后端
spring-boot 3.3.0jdk17
前端
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 axiosfunction 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)
}
/scripttemplateinput v-on:changegetFile multiplemultiple typefile /
/template方式二
就很简单了直接使用elment-plus的上传组件。 使用这种方式多文件上传时- 其实是一个一个的上传的。并不是一下子上传。
script setup
import { ref } from vue
const fileList ref([])
/scripttemplate
el-upload multipleaction/api/ceel/hiv-model:file-listfileList
el-button typeprimary上传文件/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;
