SpringBoot 整合文件上传 elment Ui 上传组件

本文章记录 自己学习使用 侵权必删！

前端代码

博主最近在学 elment Ui 所以 前端使用 elmentUi 的 upload 组件实现

  • 因为 elmentui 是基于 vue 的环境 使用的 所以我们 得引用 vue 的 js 文件
引入 elmentUi 的 css 和 js

我们采用官网的这种 cdn 的方式

  • 本地的引入的方式 容易导致elementUI与 vue 版本不匹配
  • 出现Vue warn]: Injection “elForm” not found报错解决方法
<!-- 引入Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入样式 -->

<link

  rel="stylesheet"

  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"

/>

<!-- 引入组件库 elementUi-->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
项目的目录结构：

搭建前端页面

页面效果

光光这些肯定不够 我们还需要前后端交互的页面

  • 创建的文件名称：index.html

  • 文件位置： /resources/static/index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>测试文件上传</title>

    <!-- 引入Vue -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入样式 -->

    <link

      rel="stylesheet"

      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"

    />

    <!-- 引入组件库 elementUi-->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  </head>

  <body>

    <div id="app">

      <el-upload

        class="avatar-uploader"

        action="http://localhost:8899/upload"

        :show-file-list="false"

        :on-success="handleAvatarSuccess"

      >

        <img v-if="imageUrl" :src="data:imageUrl" class="avatar" />

        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

      </el-upload>

    </div>

  </body>

  <script>

    new Vue({

      el: '#app',

      data: {

        // 图片的url

        imageUrl: '',

      },

      methods: {

        //上传成功

        handleAvatarSuccess(res) {

          // 上传的图片路径

          this.imageUrl = res

        },

      },

    })

  </script>

  <style>

    .avatar-uploader .el-upload {

      border: 1px dashed #d9d9d9;

      border-radius: 6px;

      cursor: pointer;

      position: relative;

      overflow: hidden;

    }

    .avatar-uploader .el-upload:hover {

      border-color: #409eff;

    }

    .avatar-uploader-icon {

      font-size: 28px;

      color: #8c939d;

      width: 178px;

      height: 178px;

      line-height: 178px;

      text-align: center;

    }

    .avatar {

      width: 178px;

      height: 178px;

      display: block;

    }

  </style>

</html>

所使用的依赖

找到 pom.xml

  • 因为只用到了接口 我们导入 web 的依赖即可
<parent>

        <artifactId>spring-boot-starter-parent</artifactId>

        <groupId>org.springframework.boot</groupId>

        <version>2.5.0</version>

    </parent>

    <properties>

        <maven.compiler.source>8</maven.compiler.source>

        <maven.compiler.target>8</maven.compiler.target>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

    </properties>

	<!-- web的依赖-->

    <dependencies>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

    </dependencies>

后端代码

controller
/**

 * @author : look-word

 * 2022-06-27 22:28

 **/

@RestController

public class FileController {

    /**

     *  设置/img/**的访问规则

     *  意思就是当我们访问 http://localhost:8899/img/redis.png的时候

     *  会去addResourceLocations这和目录下寻找

     */

    @Configuration

    public static class MyPicConfig implements WebMvcConfigurer {

        @Override

        public void addResourceHandlers(ResourceHandlerRegistry registry) {

            registry.addResourceHandler("/img/**")

                    .addResourceLocations("file:"+System.getProperty("user.dir") + "\\src\\main\\resources\\static\\img\\");

        }

    }

    /**

     * 接收上传文件的接口

     * @param urlFile 上传的文件

     * @param request 请求

     * @return

     */

    @PostMapping("/upload")

    public String upload(@RequestParam("file") MultipartFile urlFile,HttpServletRequest request) {

        //  url =》 http://localhost:8899/upload

        StringBuffer url = request.getRequestURL();

        // 意思是 取出ip地址加端口 http://localhost:8899

        String baseUrl = url.substring(0, url.length() - (url.length() - url.lastIndexOf("/")));

        // 文件名称

        String fileName = System.currentTimeMillis() + urlFile.getOriginalFilename();

        // 文件存储的路径

        String filePath = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\img\\";

        File file = new File(filePath);

        // 当文件夹不存在 创建文件夹

        if (!file.exists()) {

            file.mkdir();

        }

        File dest = new File(filePath + fileName);

        String storeUrlPath = "/img/" + fileName;

        try {

            // 写到文件夹中

            urlFile.transferTo(dest);

            System.out.println("上传成功");

        } catch (IOException e) {

            System.out.println("上传失败");

            throw new RuntimeException(e);

        }

        return baseUrl+storeUrlPath;

    }

}
解析代码

我们现在接收上传文件的接口 打上断点 下面一步一步解析里面的代码

  • request.getRequestURL() 意思是 获取当前请求的地址
  • http://localhost:8899/upload 是这种格式
  • baseUrl： 是截取到http://localhost:8899这串字符
  • 在返回到前端页面展示的时候需要用到
  • fileName

  • System.getProperty("user.dir") 获取的时候 当前项目在磁盘的路径

这样就上传成功啦 那么 我们该如何去访问这个图片呢？

来到这里 当我们访问的资源文件路径为/img开头的时候 会默认 去到"file:"+System.getProperty("user.dir") + "\src\main\resources\static\img\"来寻找 就是我们项目的静态资源文件夹的位置

  • 这个位置可以是任意位置

页面效果

可以看到 当我们 上传成功后 资源成功的展示到了 我们的页面上

SpringBoot 整合文件上传 elment Ui 上传组件的更多相关文章

  1. 动态读取文件持续显示在UI上

    private void DisplayLogInfo(FileInfo _LastFile) { if (_LastFile != null) { StreamReader sr = null; t ...

  2. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  3. SpringBoot整合阿里云OSS文件上传、下载、查看、删除

    1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...

  4. springboot整合web开发（整合servlet、filter、listener、访问静态、文件上传）

    整合servlet 1.继承HttpServlet 2.添加@WebServlet注解 @WebServlet(name="FirstServlet",urlPatterns=&q ...

  5. springboot整合vue实现上传下载文件

    https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...

  6. springboot 整合 tobato 的 fastdfs 实现文件上传和下载

    添加项目所需要的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  7. SpringBoot整合SpringMVC完成文件上传

    1.编写Controller /** * SPringBoot文件上传 */ //@Controller @RestController //表示该类下的方法的返回值会自动做json格式的转换 pub ...

  8. 使用SpringBoot实现文件的上传

    使用SpringBoot实现文件的上传 springboot可以直接使用 org.springframework.web.multipart.MultipartFile 所以非常容易实现 一.首先是简 ...

  9. 分布式文件系统FastDFS简介、搭建、与SpringBoot整合实现图片上传

    之前大学时搭建过一个FastDFS的图片服务器,当时只是抱着好奇的态度搭着玩一下,当时搭建采用了一台虚拟机,tracker和storage服务在一台机器上放着,最近翻之前的博客突然想着在两台机器上搭建 ...

随机推荐

  1. 踩了个DNS解析的坑，但我还是没想通

    hello大家好,我是小楼. 最近踩了个DNS解析的小坑,虽然问题解决了,但排查过程比较曲折,最后还是有一点没有想通,整个过程分享给大家. 背景 最近负责的服务要置换机器.置换机器可能很多小伙伴不知道 ...

  2. 使用pip管理库

    2.5 使用pip管理库 安装Python后会默认安装pip工具,该工具可以用来安装.升级和移除库.默认情况下 pip 将从[Python Package Index]https://pypi.org ...

  3. 日常使用mobx的小技巧

    日常使用mobx的小技巧 由于自己开发的项目都是中小型项目,所以在技术选型上使用了mobx.但是使用过程中发现关于mobx的技术文章并不多.于是萌发出写这篇文章的想法.请轻喷. 更新控制store渲染 ...

  4. 在 K8s 上运行 GraphScope

    本文将详细介绍:1) 如何基于 Kubernetes 集群部署 GraphScope ; 2) 背后的工作细节; 3) 如何在分布式环境中使用自己构建的 GraphScope 开发镜像. 上篇文章介绍 ...

  5. Java创建boolean型数组

    Java如何声明并初始化一个boolean型的数组? public class Main{ static boolean[] arr1 = new boolean[20]; public static ...

  6. 从零开始学YC-Framework之初步

    本文主要内容为如下几个方面? YC-Framework的取名出于什么考虑? YC-Framework的特点有哪些? YC-Framework的模块由哪些组成? 为什么要开发YC-Framework? ...

  7. python学习-Day37

    目录 今日内容详细 GIL全局解释器锁 GIL与普通互斥锁区别 GIL对程序的影响 验证多线程作用 两个大前提 关于CPU的个数 关于任务的类型 死锁现象 避免死锁的解决: 添加超时释放锁 信号量 自 ...

  8. Unity实现简单的对象池

    一.简介 先说说为什么要使用对象池 在Unity游戏运行时,经常需要生成一些物体,例如子弹.敌人等.虽然Unity中有Instantiate()方法可以使用,但是在某些情况下并不高效.特别是对于那些需 ...

  9. Flask01 第一个flask项目

    参考地址:https://github.com/miguelgrinberg/microblog/tree/v0.1 flask环境[苹果M1] 添加虚拟环境 python3 -m venv venv ...

  10. 虚拟机中CentOS-7.9的硬盘空间扩容(EXSI)

    目录 一.增加虚机容量 二.创建新的分区 三.格式化新分区 四.lvm实现卷扩容 五.文件系统的扩容 大家好,我是LSF,发现一台虚机上 /dev/mapper/centos-root Use%已经快 ...