前后端分离项目的文件上传下载错误总结
1、No converter for [class org.springblade.core.tool.api.R] with preset Content-Type 'application/octet-stream'
这部分是用的springblade框架,返回值要求用R对象来写,把原来的数据放在R.data中即可
2、下载的文件内容是undefined
这可能是因为指定文件错误,可以控制台打印一下数据然后找找真正需要的数据放在那里。
3、如何将文件从后端传到前端下载、如何在前端下载本地文件:
将文件读取后转换为base64格式,这个base64是二进制格式,之后传输到前端再转换回来,代码如下:
后端 Path originalFilePath = Paths.get(yourPath); String base64String = Base64.getEncoder().encodeToString(Files.readAllBytes(originalFilePath)); return ResponseEntity.ok() .headers(headers) .contentLength(resource.contentLength()) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(base64String) 前端 var byteCharacters = atob(data); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); 这个byteArray就可以直接用于Blob 对象
前后端分离下载附件部分完整代码如下:
后端:
@PostMapping("/download") @ApiOperationSupport(order = 8) @ApiOperation(value = "逻辑删除", notes = "传入ids") public ResponseEntity downloadFile(@RequestBody FileRequest fileRequest) throws IOException {// 构造文件路径 // Path originalFilePath = Paths.get(fileRequest.getUrl()); Path originalFilePath = Paths.get("E:\\download\\000000\\28b1cbc2-e0cc-422e-b7bd-5bf55ece92f6.doc"); Resource resource = new UrlResource(originalFilePath.toUri()); // 设置新文件名 String newFileName = fileRequest.getName(); String contentDisposition = "attachment; filename=" + newFileName; // 设置响应头 HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, contentDisposition); headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE); /*byte[] fileData = Files.readAllBytes(originalFilePath); String base64String = Base64.getEncoder().encodeToString(fileData);*/ String base64String = Base64.getEncoder().encodeToString(Files.readAllBytes(originalFilePath)); // 返回响应Entity return ResponseEntity.ok() .headers(headers) .contentLength(resource.contentLength()) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(base64String); }
前端:
clickFileMethod(value,key,viewForm){ download(value,viewForm.fileUrl[key]).then(res=>{ this.downloadFile(res.data.data.body, value); }).catch(error => { console.error('Error downloading file:', error); }); }, downloadFile(data, fileName) { // 将 Base64 转换为 Blob var byteCharacters = atob(data); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); // 创建一个 Blob 对象 var blob = new Blob([byteArray], { type: 'application/octet-stream' }); // 创建一个 Object URL,该 URL 代表给定的 Blob 对象或者 File 对象 const url = URL.createObjectURL(blob); // 创建一个虚拟的下载链接并点击它 const a = document.createElement('a'); a.href = url; a.download = fileName || 'downloaded_file'; document.body.appendChild(a); a.click(); // 释放资源 window.URL.revokeObjectURL(url); document.body.removeChild(a); },
js:
export const download = (name,url) => { return request({ url: 'download', method: 'post', data: { name:name, url:url } }) }
如果觉得文章对你有帮助,请点个赞吧~~