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

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

相关推荐
wainyz1 分钟前
Java NIO操作
java·开发语言·nio
工业3D_大熊7 分钟前
【虚拟仿真】CEETRON SDK在船舶流体与结构仿真中的应用解读
java·python·科技·信息可视化·c#·制造·虚拟现实
lzb_kkk15 分钟前
【JavaEE】JUC的常见类
java·开发语言·java-ee
爬山算法39 分钟前
Maven(28)如何使用Maven进行依赖解析？
java·maven
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
2401_857439691 小时前
SpringBoot框架在资产管理中的应用
java·spring boot·后端
怀旧6661 小时前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节
李老头探索1 小时前
Java面试之Java中实现多线程有几种方法
java·开发语言·面试
芒果披萨1 小时前
Filter和Listener
java·filter
qq_4924484461 小时前
Java实现App自动化（Appium Demo）
java
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05RAG 实践- Ollama+RagFlow 部署本地知识库06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除