若依框架前后端分离-文件上传和下载

### 若依框架前后端分离文件上传和下载实现方法 #### 一、文件上传功能实现 在若依框架中，为了确保文件能够安全有效地被上传至服务器并存储，在前端部分需构建表单数据并通过HTTP POST请求发送给后端服务。 对于前端Vue组件而言，利用`<input type="file">`标签让用户选取待上传的文件，并借助axios库发起异步请求。下面是一个简单的示例代码片段： ```javascript // 假设已引入axios作为http client import axios from 'axios'; export default { methods: { handleFileUpload(event){ const file = event.target.files[0]; let formData = new FormData(); formData.append('file', file); axios.post('/api/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }).then(response => { console.log(response.data); }); } } } ``` 而后端Spring Boot控制器负责接收来自客户端提交的数据流，解析其中携带的信息（如文件名），保存实际二进制内容到指定位置的同时记录必要的元数据以便后续查询操作[^1]。 ```java @RestController @RequestMapping("/api") public class FileController { @PostMapping(value="/upload", consumes=MediaType.MULTIPART_FORM_DATA_VALUE) public ResponseEntity<String> upload(@RequestParam("file") MultipartFile file) throws IOException{ // 对文件进行校验 String originalFilename = file.getOriginalFilename(); if (originalFilename != null && !"".equals(originalFilename.trim())) { // 判断文件类型是否合法 // 将文件存入磁盘或其他持久化层... return ResponseEntity.ok().body("success"); }else{ throw new RuntimeException("Invalid filename."); } } } ``` #### 二、文件下载功能实现 当涉及到从服务器获取资源时，则需要考虑安全性验证机制来防止未授权访问敏感资料的情况发生；因此除了基本的身份认证之外还应该加入针对特定业务逻辑下的权限控制措施。 具体来说就是由前端向后台发出GET请求指明想要检索的目标对象ID或者其他唯一标识符，后者依据这些线索定位对应的实体并将其转换成字节序列返回给调用方完成整个过程。 ```javascript // Vue.js 方法用于触发下载链接点击事件 downloadFile(id){ window.location.href=`/api/download/${id}`; } ``` ```java @GetMapping("/download/{id}") public void download(HttpServletResponse response,@PathVariable Long id)throws Exception{ R r = remoteFileService.downloadById(id); // 调用远程服务或本地方法 byte[] bytes = ConvertUtils.cast(r.getData()); String fileName = Convert.toStr(r.getMsg()); try(InputStream inputStream=new ByteArrayInputStream(bytes)){ // 设置响应头信息 response.reset(); response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName,"UTF-8")); response.addHeader("Content-Length", "" + bytes.length); response.setContentType("application/octet-stream"); StreamUtils.copy(inputStream,response.getOutputStream()); } } ```