springboot+vue3+Element-plus前后端分离（文件上传与回显）

一、前端实现

（一）、创建vue工程

npm init vue@latest 输入项目名称【big-file】后，全部选择否。

G:\codevue\big-event-file>cd G:\codevueG:\codevue>npm init vue@latest> npx
> create-vueVue.js - The Progressive JavaScript Framework√ 请输入项目名称： ... big-file
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是正在初始化项目 G:\codevue\big-file...项目初始化完成，可执行以下命令：cd big-filenpm installnpm run dev

执行后，初始化完成。

cd big-file
npm install

（二）、安装插件

npm install element-plus --save
npm install axios
npm install vue-router@4

（三）、前端搭建

修改后空的架构，为我使用路由来控制访问路径做准备。

<script setup></script><template></template><style scoped></style>

src下新建目录views，文件名为upload.vue 【核心一步】

结构跟空架构一致。

使用element-plus 方法来上传

使用文档：Upload 上传 | Element Plus (element-plus.org)

el-upload

action：请求 URL

on-success：文件上传成功时的钩子

before-upload：上传文件之前的钩子，参数为上传的文件，若返回false或者返回 Promise 且被 reject，则停止上传。

解读：先上传文件到后端通过 /api/upload/image, 上传成功后通过handleSuccess 设置【图片】显示（只能显示图片，但是文件也可以上传到后端）。

<template><el-uploadclass="upload-demo"action="/api/upload/image":on-success="handleSuccess":before-upload="beforeUpload"><el-button size="small" type="primary">点击上传</el-button></el-upload><div v-if="imageUrl"><img :src="imageUrl" alt="Uploaded Image" style="max-width: 100%; max-height: 300px;"></div></template><script setup>import { ElMessage } from 'element-plus';import { ref } from 'vue'const imageUrl = ref(null);const handleSuccess = (response, file, fileList) => {console.log('上传成功:', response, file, fileList);ElMessage.success('文件上传成功');imageUrl.value = `/api/mg/${file.name}`;};const beforeUpload = (file) => {console.log('文件准备上传:', file);return true;};</script>

创建路由【src下新建目录router，文件名为index.js 】

第一步：导入需要使用的组件，我这边目前演示只有upload.vue一个。

第二步：定义路由关系，可以在 http://localhost:5173/upload

访问。

第三步：创建路由器

第四步：导出路由

// 导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
// 导入组件import upload from '@/views/upload.vue'// 定义路由关系
const routes = [{path: '/upload',component: upload}
]
// 创建路由器
const router= createRouter({history: createWebHistory(),routes
});
// 导出模块出口
export default router

修改main.js文件

// Vue 3 中用于创建应用程序实例的方法
import { createApp } from 'vue'
//应用程序的根目录
import App from './App.vue'
// 导入路由的配置
import router from '@/router'
//Element Plus 组件库的样式文件和组件库本身
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
// 创建程序应用实例
const app = createApp(App)
// 增加ElementPlus 插件
app.use(ElementPlus)
// 增加路由
app.use(router)
// 挂载应用程序
app.mount('#app')

src目录下App.vue 增加路由配置

<router-view> 是 Vue Router 中的一个特殊组件，用于渲染当前激活的路由对应的组件。它是 Vue 单页应用 (SPA) 中实现动态路由的关键部分。
1. 动态渲染组件:
  - <router-view> 会根据当前的 URL 渲染对应的组件。
  - 当 URL 发生变化时，<router-view> 会自动更新显示的内容。
2. 嵌套路由支持:
  - 可以嵌套多个 <router-view> 组件来支持嵌套路由。
  - 子 <router-view> 会渲染子路由对应的组件。
3. 命名视图:
  - 支持通过命名视图来同时渲染多个组件，这对于复杂的布局非常有用。
  - 可以使用 <router-view name="header"></router-view> 和 <router-view name="content"></router-view> 来定义不同的视图区域。
```
<script setup></script><template><router-view></router-view></template><style scoped></style>
```

vite.config.js 配置代理解决跨域问题

设置目前后端服务器目标，开启跨域，包含api路径的请求进行替换为空值。

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 配置代理server: {proxy: {'/api': {target: 'http://localhost:8081', // 后端服务器地址changeOrigin: true, // 是否跨域rewrite: (path) => path.replace(/^\/api/, '') //将原有请求路径中的api替换为''}}}
})

开启前端服务
```
npm run dev
```

二、后端实现

（一）、SpringBoot 快速搭建

maven 配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.3</version></parent><groupId>com.example</groupId><artifactId>springcsrf</artifactId><version>0.0.1-SNAPSHOT</version><name>springcsrf</name><description>springcsrf</description><url/><licenses><license/></licenses><developers><developer/></developers><scm><connection/><developerConnection/><tag/><url/></scm><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><!--web依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

（二）、跨域配置

前后端分离的话会存在跨域的现象的

新建config 目录，后面增加CorsConfig类。

package com.example.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig implements WebMvcConfigurer {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("*");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}}

（三）、配置文件修改

application.properties , 修改上传和显示文件大小的设置。避免文件大小出现的报错。

spring.application.name=springcsrf
server.port=8081
spring.servlet.multipart.max-file-size=1000MB
spring.servlet.multipart.max-request-size=1000MB

（四）、主运行文件修改

SpringcsrfApplication 文件修改

1.存储到本地的路径
Paths.get(“G:\XiaoBaiAI”)

package com.example.springcsrf;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;
import java.util.HashMap;
import java.util.Map;@SpringBootApplication
public class SpringcsrfApplication {public static void main(String[] args) {SpringApplication.run(SpringcsrfApplication.class, args);}@RestControllerpublic class SimpleGetController {@GetMapping("/get")public ResponseEntity<String> handleGetRequest() {// 返回数据return ResponseEntity.ok("Hello, this is a GET response!");}}@RestControllerpublic class SimpleGetController2 {@PostMapping("/post")public ResponseEntity<String> handlePostRequest(@RequestBody String data) {// 处理接收到的数据System.out.println("Received data: " + data);return ResponseEntity.ok("Data received successfully: " + data);}}// 存储到本地的路径private Path uploadDir = Paths.get("G:\\XiaoBaiAI");@RestControllerpublic class ImageUploadController {@PostMapping("/upload/image")public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile image,HttpServletRequest request) throws IOException {System.out.println(uploadDir);System.out.println(image.getOriginalFilename());Files.createDirectories(uploadDir);Files.copy(image.getInputStream(), uploadDir.resolve(image.getOriginalFilename()), StandardCopyOption.REPLACE_EXISTING);return ResponseEntity.ok("Image uploaded successfully: " + image.getOriginalFilename());}}@RestControllerpublic class ImageUploadControllers {@GetMapping("/mg/{imageName}")public ResponseEntity<FileSystemResource> getImageS(@PathVariable String imageName) {System.out.println("G:\\XiaoBaiAI\\" + imageName);File imageFile = new File("G:\\XiaoBaiAI\\" + imageName);if (imageFile.exists()) {HttpHeaders headers = new HttpHeaders();headers.add("Content-Type", "image/png"); // 根据图片格式调整return new ResponseEntity<>(new FileSystemResource(imageFile), headers, HttpStatus.OK);} else {System.out.println("图片不存在");return new ResponseEntity<>(HttpStatus.NOT_FOUND);}}}}