devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot+vue3+Element-plus前后端分离（文件上传与回显）_vue3 如何将后端返回的文件回显到上传组件默认的文件列表中

作者：一键难忘520 | 2024-08-22 16:05:54

赞

踩

vue3 如何将后端返回的文件回显到上传组件默认的文件列表中

一、前端实现

（一）、创建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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

执行后，初始化完成。

cd big-file
npm install

（二）、安装插件

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

  • 1
  • 2
  • 3

（三）、前端搭建

  1. src目录下App.vue修改

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

<script setup>

</script>

<template>


</template>

<style scoped>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

  2. 创建路由【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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

  3. 修改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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

  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> 来定义不同的视图区域。
    <script setup>

</script>

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

</template>

<style scoped>

</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

  5. 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替换为''
      }
    }
  }
})



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

  6. 开启前端服务

    npm run dev

    • 1

二、后端实现

（一）、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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

（二）、跨域配置

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

新建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);

    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

（三）、配置文件修改

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

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


  • 1
  • 2
  • 3
  • 4
  • 5

（四）、主运行文件修改

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);
            }
        }
    }

}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85

三、全部代码下载

下载路径。
https://download.csdn.net/download/weixin_45631815/89645203
成为粉丝私聊，免费提供。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/1017074
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号