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

金融小白数据分析之路2024-08-17 9:53

一、前端实现

（一）、创建vue工程

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

bash 复制代码 
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

（三）、前端搭建

  1. src目录下App.vue修改

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

vue 复制代码 
<script setup>

</script>

<template>


</template>

<style scoped>

</style>

  1. 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 设置【图片】显示（只能显示图片，但是文件也可以上传到后端）。

    vue 复制代码 
    <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>

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

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

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

    访问。

    第三步：创建路由器

    第四步：导出路由

    js 复制代码 
    // 导入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

  3. 修改main.js文件

    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')

  4. 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> 来定义不同的视图区域。
    vue 复制代码 
    <script setup>

</script>

<template>
  <router-view></router-view>

</template>

<style scoped>

</style>

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

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

    js 复制代码 
    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替换为''
      }
    }
  }
})

  6. 开启前端服务

    bash 复制代码 
    npm run dev

二、后端实现

（一）、SpringBoot 快速搭建

maven 配置

xml 复制代码 
<?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类。

java 复制代码 
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 , 修改上传和显示文件大小的设置。避免文件大小出现的报错。

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")

java 复制代码 
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);
            }
        }
    }

}

三、全部代码下载

下载路径。

https://download.csdn.net/download/weixin_45631815/89645203

成为粉丝私聊，免费提供。

相关推荐
m0_54851477几秒前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
Calm5504 分钟前
Vue3：uv-upload图片上传
前端·vue.js
新中地GIS开发老师16 分钟前
《Vue进阶教程》（12）ref的实现详细教程
前端·javascript·vue.js·arcgis·前端框架·地理信息科学·地信
漫天转悠17 分钟前
Vue3中404页面捕获（图文详情）
vue.js
坊钰28 分钟前
【Java 数据结构】移除链表元素
java·开发语言·数据结构·学习·链表
chenziang133 分钟前
leetcode hot100 LRU缓存
java·开发语言
会说法语的猪39 分钟前
springboot实现图片上传、下载功能
java·spring boot·后端
码农老起39 分钟前
IntelliJ IDEA 基本使用教程及Spring Boot项目搭建实战
java·ide·intellij-idea
m0_7482398344 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）