springboot vue前后端分离实现文件预览

在 Spring Boot 和 Vue 前后端分离架构中，实现文件预览可以通过前端发送请求获取文件的 URL，然后在前端使用相关插件或组件进行文件预览。

下面是一种可能的实现方式：

1. 后端实现：
- 在 Spring Boot 中配置静态资源路径，将存储文件的文件夹路径设置为静态资源路径。例如，可以在 `application.properties` 文件中添加以下配置：

     spring.resources.static-locations=file:/path/to/files/

- 后端提供一个接口，用于返回文件的URL。可以在控制器中编写如下代码：

     @RestController
     public class FileController {
     
         @Value("${spring.resources.static-locations}")
         private String staticResourcePath;
     
         @GetMapping("/api/file/{fileName}")
         public ResponseEntity<Resource> getFile(@PathVariable String fileName) throws IOException {
             Path filePath = Paths.get(staticResourcePath + fileName);
             Resource resource = new UrlResource(filePath.toUri());
         
             if (resource.exists() && resource.isReadable()) {
                 return ResponseEntity.ok()
                         .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileName + "\"")
                         .body(resource);
             } else {
                 // 文件不存在或无法读取
                 return ResponseEntity.notFound().build();
             }
         }
     }

2. 前端实现：
- 在 Vue 组件中，使用 axios 或其他网络请求库发送 GET 请求，获取文件的 URL。例如：

     import axios from 'axios';
     
     // 在组件中调用接口获取文件 URL
     axios.get('/api/file/fileName.pdf')
         .then(response => {
             const fileUrl = response.data;
             // 使用文件预览插件或组件进行预览
             // 例如，可以使用 pdf.js 进行 PDF 文件预览
             // 或者使用 <img> 标签显示图片、使用 <video> 标签播放视频等
         })
         .catch(error => {
             console.error(error);
         });

需要注意的是，上述代码只是一种简单的实现方式，具体的预览方式和插件选择取决于你要预览的文件类型。你可以根据实际需求选择合适的插件或组件来实现文件预览功能，例如 pdf.js、viewer.js 等。