Vue+Element+Springboot实现图片上传
最近没事刚好练习下vue+springboot前段后分离的项目、用上了图片上传功能、记录一下。
前端待提交的表单部分代码。
<el-form-item label="封面图片"><el-upload v-model="dataForm.title"class="avatar-uploader":limit="1"list-type="picture-card":on-preview="handlePictureCardPreview"multiple:http-request="uploadFile":on-remove="handleRemove":on-change='changeUpload':file-list="images"><i class="el-icon-plus"></i></el-upload></el-form-item>
复制代码el-upload里面的元素解释：
on-preview:点击文件列表中已上传的文件时的事件
on-remove:删除文件时候调用的方法
on-change:文件状态改变时的事件，添加文件、上传成功和上传失败时都会被调用
file-list:上传的文件列表或者默认回显的数据展示渲染
retrun和data
return {images: [{name: 'food.jpg', url: 'https://img-blog.csdnimg.cn/20210329194832973.png'}],imageUrl: '',fileList: [], // 文件上传数据（多文件合一）dialogImageUrl: '',dialogVisible: false,options: [],content: '',editorOption: {},visible: false,dataForm: {id: 0,title: '',content: '',bz: ''},tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化}
复制代码预览图片和上传图片以及删除图片
changeUpload: function(file, fileList) {//预览图片this.fileList = fileList;},uploadFile(file){},handleRemove(file, fileList) {},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},
复制代码这里我是用fomrData对象进行提交的、因为只需要上传一张单张封面图片、还有添加其他的一些表单内容进去
// 表单提交dataFormSubmit () {const form = new FormData()// FormData 对象form.append('file', this.fileList);form.append('title', this.dataForm.title);form.append('content', this.$refs.text.value);this.$refs['dataForm'].validate((valid) => {if (valid) {this.$http({url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`),method: 'post',data: form}).then(({data}) => {if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500,onClose: () => {this.visible = falsethis.$emit('refreshDataList')}})} else {this.$message.error(data.msg)}})}})}
复制代码后台的话通过HttpServletRequest request--WebUtils .getNativeRequest(request, MultipartHttpServletRequest.class)来获取文件请求并解析文件到服务器或本地
/*** @author lyy* 保存 PC-后台上传文件*/
@RequestMapping(value = "sys/file/save", method = {RequestMethod.POST, RequestMethod.GET})
@Transactional
public R save(HttpServletRequest request) {String classify = request.getParameter("classify");MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);String fileName = "";if (multipartRequest != null) {Iterator<String> names = multipartRequest.getFileNames();while (names.hasNext()) {List<MultipartFile> files = multipartRequest.getFiles(names.next());if (files != null && files.size() > 0) {for (MultipartFile file : files) {fileName = file.getOriginalFilename();String SUFFIX = FileUtil.getFileExt(fileName);File uFile = new File();uFile.setFileName(fileName);uFile.setClassify(classify);uFile.setCreateTime(new Date());uFile.setFileType(SUFFIX);String uuid = FileUtil.uuid();try {uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX);} catch (IOException e) {e.printStackTrace();}fileService.save(uFile);}}}}return R.ok();
}
复制代码上传文件到本地的静态方法
/*** 上传文件*@author lyy* @param file* @return* @throws IOException* @throws IllegalStateException*/public static String uploadFile(String uuid, MultipartFile file) throws IllegalStateException, IOException {String defaultUrl = MyFileConfig.getFilePath();String Directory = java.io.File.separator ;String realUrl = defaultUrl + Directory;java.io.File realFile = new java.io.File(realUrl);if (!realFile.exists() && !realFile.isDirectory()) {realFile.mkdirs();}String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename());file.transferTo(new java.io. File(fullFile));String relativePlanUrl = Directory;return relativePlanUrl.replaceAll("\\", "/");}
精彩源码推荐：
大家点赞、收藏、关注、评论啦 、查看
Vue+Element+Springboot实现图片上传相关推荐
- 使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示 环境配置 准备环境 使用软件 图片上传 图片删除 图片显示 所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
- element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显 而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
- Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显 在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
- 菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...
- SpringBoot+Thymeleaf图片上传
SpringBoot+Thymeleaf图片上传 首先需要添加本地图片映射 我是在启动类添加 @SpringBootApplication @MapperScan("com.example. ...
- springboot入门系列教程|第九篇：springboot实现图片上传与显示（附源码）
前言## 上一篇我们介绍了springboot如何实现自定义拦截器配合注解使用,那么这篇我们将介绍springboot实现图片上传的功能. 目录## 文章目录 前言## 目录## 项目创建### 项目 ...
- springboot实现图片上传到又拍云中，并且保存图片外连接路径到数据库，外连接也可访问图片（一）
注册又拍云账号,申请一个云存储空间.如果开启服务状态,开启状态把必须要进行实名认证.开启状态之后,自行申请服务即可.申请完成之后,点击配置 进入下个页面不用管,直接点击存储管理. 拉到最下面查看管理员 ...
- elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 （非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
最新文章
- c++一些常见的知识点
- PHP SSL certificate: unable to get local issuer certificate的解决办法
- Leangoo敏捷看板管理 6.3.8
- MATLAB常用的学习的网站
- 一个TreeView 样式表
- Python练习2-基本聊天程序-虚拟茶会话
- C#委托使用详解（Delegates）
- 【放置奇兵】天六水晶和心三水晶（宝石、心灵水晶）
- java实现登陆面试题_【Javaweb】笔面试题 ---(1)(示例代码)
- 【Python】Error：'int' object is not callable
- Airflow 中文文档：调度和触发器
- 多元有序logistic回归_stata速学|logistic回归分析
- 参数问题：nested exception is java.lang.NumberFormatException: For input string: “null“，已解决。
- 不同浏览器的使用体会
- 同源、跨域、跨站、SameSite与withCredentials
- Win10经常断开网络连接的原因
- PyQT股票看板软件界面设计
- Springboot集成MybatisPlus、Druid
- 【毕业设计】基于spring boot的图书管理系统 -java 计算机 软件工程
- 腾讯云TSF微服务平台及ServiceMesh技术实践
热门文章
- C#中? 、?? 、?. 、??= 的用法和说明
- Metrics_collector还没有添加到共享预加载库(shared_preload_libraries)中
- 人脸检测算法_腾讯已开源高精度人脸检测算法DSFD
- 学java交学费包分配_java 学生缴学费案例:
- abap视图字段限制_【第八章】视图
- 建立a8 linux开发环境,Fedora 14下建立 omap3530 开发环境 - 交叉编译器
- 支援 Chrome 插件：微软 Chromium 内核 Edge 浏览器可以下载啦！
- linux怎么休眠快捷键,在Deepin系统中创建右键休眠选项的方法
- 封装html ui 控件,聊聊前端 UI 组件：组件设计
- oracle嵌套三层循环语句,在存储过程中执行3种oracle循环语句