SpringBoot 整合文件上传 elment Ui 上传组件
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 上传组件的更多相关文章
- 动态读取文件持续显示在UI上
private void DisplayLogInfo(FileInfo _LastFile) { if (_LastFile != null) { StreamReader sr = null; t ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- SpringBoot整合阿里云OSS文件上传、下载、查看、删除
1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...
- springboot整合web开发（整合servlet、filter、listener、访问静态、文件上传）
整合servlet 1.继承HttpServlet 2.添加@WebServlet注解 @WebServlet(name="FirstServlet",urlPatterns=&q ...
- springboot整合vue实现上传下载文件
https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...
- springboot 整合 tobato 的 fastdfs 实现文件上传和下载
添加项目所需要的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- SpringBoot整合SpringMVC完成文件上传
1.编写Controller /** * SPringBoot文件上传 */ //@Controller @RestController //表示该类下的方法的返回值会自动做json格式的转换 pub ...
- 使用SpringBoot实现文件的上传
使用SpringBoot实现文件的上传 springboot可以直接使用 org.springframework.web.multipart.MultipartFile 所以非常容易实现 一.首先是简 ...
- 分布式文件系统FastDFS简介、搭建、与SpringBoot整合实现图片上传
之前大学时搭建过一个FastDFS的图片服务器,当时只是抱着好奇的态度搭着玩一下,当时搭建采用了一台虚拟机,tracker和storage服务在一台机器上放着,最近翻之前的博客突然想着在两台机器上搭建 ...
随机推荐
- JDK内置锁深入探究
一.序言 本文讲述仅针对 JVM 层次的内置锁,不涉及分布式锁. 锁有多种分类形式,比如公平锁与非公平锁.可重入锁与非重入锁.独享锁与共享锁.乐观锁与悲观锁.互斥锁与读写锁.自旋锁.分段锁和偏向锁/轻 ...
- 大一/初学者学C语言前必看！！！（建议收藏）
目录 数据类型 常量.变量 数组 字符串.转义字符 选择语句 循环语句 函数 操作符 结构体 指针 神秘的学习资料基地jq.qq.com/?_wv=1027&k=5kWJsY1z 一.数据类 ...
- Django模板相关
1.母版 想象一个举着火炬的手,除了火炬这个手还能举棒球棍.举雷神之锤.举拖拉机钥匙等等,举得东西不同给人整体感觉就不同. 母版就相当于这个手(实际为一个html文件),其他相关的html文件就相当于 ...
- vue - git
今天差不多从中午开始下午一点才开始学的,把git学了一大半了,还好任务不是很多,但是我上午用的时间挺值的,因为我去搞了个cnblogs的背景主题,就是你们现在所看到的这套,这个没搞明白有一通研究的,只 ...
- 《转载》python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习学习资源分享
本次分享一部分python/人工智能/Tensorflow/自然语言处理/计算机视觉/机器学习的学习资源,也是一些比较基础的,如果大家有看过网易云课堂的吴恩达的入门课程,在看这些视频还是一个很不错的提 ...
- InnoDB数据存储结构
MySQL服务器上 存储引擎 负责对表中数据的读取和写入工作,不同存储引擎中 存放的格式 一般是不同的,甚至有的存储引擎(Memory)不用磁盘来存储数据. 页 (Page) 是磁盘和内存之间交互的基 ...
- 视网膜血管分割代码(Pytorch实现)
创建日期: 2021-12-24 17:00:00 update log(2021.12.24):B站视频删除了,回放看了一下,讲的不太行......2333,时间过得真快,转眼就是2022年了啊 2 ...
- 生成器对象（自定义迭代器），自定义range方法，模块
自定义迭代器 一 .生成器与yield ''' 我们得到一个迭代器通常都是调用可迭代对象的__iter__方法 ,例如 list.iter() 得到一个迭代器, 但是当list很大时候,就违背了pyt ...
- JS 的 new 是个啥？
JS 的 new 是个啥? 本文写于 2019 年 11 月 25 日 new关键字在很多语言里面,总是用于把类实例化,可是 JS 之前就没有"类"这个概念呀. 那 JS 的new ...
- Redisson批量操作类RBuckets和管道利器RBatch
<Spring Boot 整合Redisson配置篇> <Spring Boot 整合Redisson操作Redis基础篇> <Redisson批量操作类RBuckets ...