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

金融小白数据分析之路

已于 2024-08-16 16:55:25 修改

阅读量1.1k

点赞数 9

分类专栏：前端后端 SSM框架学习文章标签： spring vue.js java

于 2024-08-16 16:36:57 首次发布

本文链接：https://blog.csdn.net/weixin_45631815/article/details/141263527

版权

SSM框架学习同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

后端

3 篇文章 0 订阅

订阅专栏

一、前端实现

（一）、创建vue工程

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

G:\codevue\big-event-file>cd G:\codevue

G:\codevue>npm init vue@latest

> npx
> create-vue

Vue.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-file
  npm install
  npm 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-upload
      class="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 {
    @Bean
    public 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);
    }
    @RestController
    public class SimpleGetController {

        @GetMapping("/get")
        public ResponseEntity<String> handleGetRequest() {
            // 返回数据
            return ResponseEntity.ok("Hello, this is a GET response!");
        }
    }
    @RestController
    public 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");
    @RestController
    public 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());
        }
    }

    @RestController
    public 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);
            }
        }
    }

}