Spring Boot Vue3 Element Plus 文件上传下载实现教程

'要在 Spring Boot 和 Vue 3 中实现文件上传和下载，您可以按照以下步骤进行操作：\n\n1. 在 Spring Boot 中，创建一个文件上传和下载的 Controller 类。使用 @PostMapping 注解创建一个 POST 请求处理方法来处理文件上传。在方法中，使用 @RequestParam 注解来接收文件，并使用 MultipartFile 类型来保存文件。然后，使用 FileOutputStream 将文件保存到本地磁盘或者数据库中。\n\n java\\n @RestController\\n public class FileController {\\n \\n @PostMapping('/upload')\\n public String uploadFile(@RequestParam('file') MultipartFile file) {\\n // 保存文件到本地磁盘或者数据库\\n // ...\\n return \'File uploaded successfully\';\\n }\\n \\n @GetMapping('/download')\\n public ResponseEntity<Resource> downloadFile() {\\n // 从本地磁盘或者数据库中获取文件\\n // ...\\n // 创建一个 Resource 对象来保存文件\\n Resource resource = new ByteArrayResource(fileBytes);\\n return ResponseEntity.ok()\\n .header(HttpHeaders.CONTENT_DISPOSITION, \'attachment; filename=\'' + fileName + '\')\\n .body(resource);\\n }\\n }\\n \n\n2. 在 Vue 3 中，使用 el-upload 组件来实现文件上传。首先，您需要在 Vue 3 中安装 element-plus，并在需要使用的组件中导入和注册 el-upload 组件。\n\n vue\\n <template>\\n <el-upload\\n action='/upload'\\n :on-success='handleSuccess'\\n :before-upload='beforeUpload'\\n :file-list='fileList'\\n :auto-upload='false'\\n >\\n <el-button slot='trigger' size='small' type='primary'>选择文件</el-button>\\n <el-button style='margin-left: 10px;' size='small' type='success' @click='upload'>上传</el-button>\\n </el-upload>\\n </template>\\n \\n <script>\\n import { ref } from 'vue';\\n \\n export default {\\n setup() {\\n const fileList = ref([]);\\n \\n const handleSuccess = (response) => {\\n console.log(response);\\n // 处理上传成功的逻辑\\n };\\n \\n const beforeUpload = (file) => {\\n fileList.value.push(file);\\n return false; // 阻止自动上传\\n };\\n \\n const upload = () => {\\n fileList.value.forEach((file) => {\\n const formData = new FormData();\\n formData.append('file', file);\\n \\n // 发起上传请求\\n // ...\\n });\\n };\\n \\n return {\\n fileList,\\n handleSuccess,\\n beforeUpload,\\n upload,\\n };\\n },\\n };\\n </script>\\n \n\n3. 在 Vue 3 中，使用 el-link 组件来实现文件下载。您可以在需要下载文件的地方使用 el-link 组件，并将其 href 属性指向 Spring Boot 中的下载接口。\n\n vue\\n <template>\\n <el-link :href='downloadUrl' target='_blank'>下载文件</el-link>\\n </template>\\n \\n <script>\\n import { ref } from 'vue';\\n \\n export default {\\n setup() {\\n const downloadUrl = ref('/download');\\n \\n return {\\n downloadUrl,\\n };\\n },\\n };\\n </script>\\n \n\n请注意，在上述示例中，我使用了 element-plus 库来实现 UI 组件，您可以根据自己的喜好选择其他的 UI 库。同时，您需要根据实际情况来修改 Spring Boot 中的文件保存和获取逻辑。