关键词：
后端（springBoot）
- 思路：
1、实现图片上传接口，利用图片工具类将图片上传至服务器或者本地
2、实现图片删除接口，利用图片工具类对已上传至服务器或者本地的图片删除
3、实现数据库修改接口，修改数据库中图片访问路径url - 图片工具类
//图片上传，支持多张图片
public static List<String> upload(List<MultipartFile> files, String path) throws IOException
List<String> msgs = new ArrayList<>();
if (files.size() < 1)
msgs.add("file_empty");
return msgs;
for (MultipartFile file : files)
String filename = file.getOriginalFilename();
assert filename != null;
String type = filename.contains(".") ? filename.substring(filename.lastIndexOf(".")) : null;
//以uid重新命名避免重复
//拼接文件路径，方便前端接收
String filepath = path + UUID.randomUUID() + type;
File filesPath = new File(path);
if (!filesPath.exists())
filesPath.mkdir();
BufferedOutputStream out = null;
try
//输入图片字节流
out = new BufferedOutputStream(new FileOutputStream(new File(filepath)));
out.write(file.getBytes());
msgs.add(filepath);
catch (Exception e)
e.printStackTrace();
finally
if(out != null)
out.flush();
out.close();
return msgs;
//文件删除
public static boolean deleteFiles(String filePath)
boolean flag = false;
//根据路径创建文件对象
File file = new File(filePath);
//路径是个文件且不为空时删除文件
if(file.isFile() && file.exists())
flag = file.delete();
//删除失败时，返回false
return flag;
- 图片上传接口
@PostMapping("/image")
public AjaxResult uploadImage(@RequestParam(value = "file") List<MultipartFile> file)
List<String> imagePath;
String path = "此处为需要上传的服务器或本地路径url";
// 调用图片上传工具类
try
imagePath = UploadFile.upload(file,path);
catch (IOException e)
return AjaxResult.error("图片传输异常" + e);
if(imagePath.get(0).equals("file_empty"))
return AjaxResult.error("图片为空");
return AjaxResult.success(imagePath);
- 图片删除接口
@DeleteMapping("/deleteFile/fileName")
public AjaxResult deleteFile(@PathVariable String fileName)
String type = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".")) : null;
String filePath;
assert type != null;
if(type.equals(".png") || type.equals(".jpeg") || type.equals(".jpg"))
filePath = "上传图片的服务器或本地路径url" + fileName;
else
return AjaxResult.error("文件类型不支持");
boolean b = UploadFile.deleteFiles(filePath);
if(!b)
return AjaxResult.error();
return AjaxResult.success();
- 实体类修改接口
此接口根据实际业务需求，实现可以修改包括图片url在内的数据库update代码，使用string接收url即可
@PutMapping("/update")
public AjaxResult update(@RequestBody Entity entity)
return toAjax(service.update(entity));
前端（Vue+ElementUI）
- 思路
1、表单中点击上传图片
2、利用上传文件之前的钩子进行文件类型以及大小校验
3、利用上传图片成功钩子将图片信息保存在fileList中，方便后续功能使用
4、利用文件状态改变钩子将文件存储url添加到表单中
5、利用文件删除钩子移除图片，需要同时删除后台图片、fileList中图片信息、表单信息
6、利用文件超出个数限制时的钩子做图片上传数量限制提示
7、图片回显需要在点击修改按钮后进行赋值，回显属性需要数组类型 - 图片上传类
data()
return
// 图片上传类
ImgUpload:
// 图片上传url
uploadURL: "上传接口url",
// 图片列表
fileList: [],
// 图片回显列表
re_fileList: [],
// 图片上传请求头
uploadHeaders: "tk" : getToken(),
- 图片上传组件
<el-upload
:action = "imgUpload.uploadURL"
:limit = "Number(1)"
:file-list = "imgUpload.re_fileList"
:headers = "imgUpload.uploadHeaders"
:before-upload = "imgHandleBefore"
:on-success = "imgHandleSuccess"
:on-change = "imgUploadStateChange"
:on-remove = "imgHandleRemove"
:on-exceed = "imgHandleExceed"
:auto-upload = "true"
list-type = "picture"
ref = "imgUpload"
accept = "image/jpeg,image/png,image/jpg">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传一张jpg/jpeg/png图片，且不超过5Mb</div>
</el-upload>
- 图片上传前校验
imgHandleBefore(file)
const isLt5M = file.size / 1024 / 1024 < 5;
const typeArr = ['image/png', 'image/jpeg', 'image/jpg'];
const isJPG = typeArr.indexOf(file.type) !== -1;
// 文件格式校验
if (!isJPG)
this.$message.error('只能上传jpg/jpeg/png图片');
return false;
// 文件大小校验
if (!isLt5M)
this.$message.error('上传图片大小不能超过5MB!');
return false;
return isLt5M && isJPG;
- 图片上传成功钩子
imgHandleSuccess(response)
if(response.code !== 200)
this.$message.error("图片上传失败！");
return;
// 得到一个图片信息对象 临时路径
const picInfo = pic: response.data ;
// 将图片信息对象，push到fileList数组中
this.imgUpload.fileList.push(picInfo);
- 图片状态改变钩子
imgUploadStateChange()
// 拼接图片访问url到表单中（仅上传一张，上传多张时需要逗号拼接）
if(this.imgUpload.fileList.length !== 0)
this.form.image = this.imgUpload.fileList[0].pic;
- 图片删除钩子
imgHandleRemove(file)
// 由于上传前校验钩子return false时会调用文件删除钩子，删除前先做判断，若上传成功才可删除
if(file && file.status === 'success')
// 0、获取将要删除图片的临时路径以及文件名称
let filePath = "";
if(file.response !== undefined)
filePath = file.response.data[0];
else
filePath = file.url;
let imageName = filePath.substring(filePath.lastIndexOf("\\\\") + 1);
// 1、删除单张后台图片，deleteFile为后台删除图片接口
deleteFile(imageName).then(response =>
if(response.code !== 200)
this.$message.error("删除后台图片失败");
return;
this.$message.success("删除图片成功");
);
// 2、调用splice方法，移除图片信息
this.imgUpload.fileList.splice(0,1);
// 3、同时表单置空
this.form.image = "";
- POI图片上传超出数量警告
poiImgHandleExceed()
this.$message.warning("超过图片上传数量！");
- 所有图片文件列表以及回显列表置空
// 点击修改按钮和新增按钮时先调用此删除进行清空图片列表
resetImgList()
this.imgUpload.fileList = [];
this.imgUpload.re_fileList = [];
- 修改按钮中进行图片回显
/** 修改数据函数 */
handleUpdate()
// 表单置空
this.reset();
// 图片列表以及回显列表清空
this.resetImgList();
this.submitLoading = false;
this.open = true;
this.title = "";
// POI图片回显，response.data.imagee是根据后台查出来的单条数据
selectDataById(id).then(response=>
this.form = response.data;
// 若是多张图片根据逗号拆分
let urlStr = response.data.image.split(",");
urlStr.forEach(item =>
let obj = ;
obj.url = item;
this.imgUpload.re_fileList.push(obj);
);
);
- 表单取消按钮
cancel()
// 由于图片自动上传，若有已上传图片需要先删除再取消，否则后台会留存图片
if(this.imgUpload.fileList.length > 0)
this.$alert('请先移除已上传图片', '警告',
confirmButtonText: "确定",
type: "warning"
)
return;
// 对话框关闭
this.open = false;
// 表单清空
this.reset();
至此完成整个前端后端图片上传流程，若有不足之处，或更好的建议欢迎评论区讨论。
springboot+vue+elementui+flowable+自定义表单
参考技术A源码springboot：https://gitee.com/zjm16/zjmzxfzhlspringcloud：https://gitee.com/zjm16/zjmzxfzhl-cloud演示环境http://118.190.100.3:8080/zjmzxfzhl/ 查看详情
毕业设计springboot+vue+elementui商城系统讲解（有后台）
商城后台系统讲解 查看详情
springboot+vue+elementui实现后台管理系统模板
...2、封装要求3、引入mock 前提：（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y 查看详情
springboot+vue+elementui实现后台管理系统模板--前端篇：使用vue-router进行动态加载菜单
SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（六）：使用vue-router进行动态加载菜单阅读目录一、获取动态菜单数据1、介绍2、使用mock模拟返回动态菜单数据3、动态菜单数据国际化问题... 查看详情
springboot+mybatis+vue+elementui实现省市县组件封住(代码片段)
SpringBoot后台项目编写：pom.xml文件<projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://mav 查看详情
java项目:校园跑腿管理系统(java+springboot+vue+maven+elementui+mysql)
前端使用的是vue+elementui,这款系统只适合学习巩固SpringBoot+VUE,后面还要在这上面加校园公告、校园零食等功能，后期代码我也会持续更新上去。系统分为管理员和学生、学生是管理员后台添加的两种角色。运行环境:后... 查看详情
vue2使用elementui进行表单验证实操（附源码）(代码片段)
...到，中间还有做到！🤘本文核心：vue使用elementUI进行表单验证实操（附源码）【前言】我们在构建一个项目中，基本是无法避免不使用表单来收集数据的。比如登录注册页面，我们需要验证输入者... 查看详情
前后端分离博客项目（springboot/redis/shiro/swagger/mybatis-plus/vue/elementui）
blogs项目blogs项目是myblog项目演进与完善的迭代项目，设计框架由springboot+thymeleaf+mybatis-plus+shiro+swagger改为springboot+vue+mybatis-plus+redis+shiro+swagger的前后端分离项目blogs项目主要由blogs_springboot后端项目与blogs_vue前端项目组成blogs_sprin 查看详情
手办商城系统|springboot+vue+elementui手办商城系统(代码片段)
...末获取源码 项目编号：BS-SC-040一，项目简介基于SpringBoot手办周边系统功能结构图如图3 查看详情
springboot+vue+elementui实现后台管理系统模板--后端篇：数据表设计使用jwtredissms工具类完善注册登录逻辑(代码片段)
（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.htmlSpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（二）：引入element-ui定义基本页面显示：https://w... 查看详情
精通系列）(代码片段)
Java之SpringBoot+Vue+ElementUI前后端分离项目（上-项目搭建）Java之SpringBoot+Vue+ElementUI前后端分离项目（中-功能完善-实现查询）Java之SpringBoot+Vue+ElementUI前后端分离项目（下-功能完善-发布文章 查看详情
springboot+vue+elementui+阿里云oss上传文件(代码片段)
才做完课程设计没多久，本来打算早点写这一篇文章，但是由于太懒了，就拖延了好几天，今天没什么事情，就打算写下一篇关于文件上传我文章，希望可以帮助到大家需要准备：配置好maven购买阿里... 查看详情
计算机毕业设计springboot+vue+elementui校园疫情防控系统
项目介绍基本实现了校园疫情防控系统应有的主要功能模块，本系统有管理员、学生。管理员：首页、个人中心、核酸检测管理、体温状态管理、学生管理、学生状态管理、休假申请管理、出入登记管理、疫情知识管理... 查看详情
免费分享一套springboot+vue+elementui的人力资源管理系统，挺漂亮的(代码片段)
大家好，我是锋哥，看到一个不错的SpringBoot+Vue+ElementUI的人力资源管理系统，分享下哈。项目介绍项目背景人力资源管理是企业运营中必不可少的一环，它关系到企业的前途与发展。尤其对于中小微企业来... 查看详情
基于java+springboot+vue+elementui图书商城系统设计实现(代码片段)
博主介绍：✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取联系🍅精彩专栏推... 查看详情
基于java+springboot+vue+elementui图书商城系统设计实现(代码片段)
博主介绍：✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取联系🍅精彩专栏推... 查看详情
售票系统|基于springboot+vue+elementui实现海底世界售票系统(代码片段)
作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷... 查看详情
售票系统|基于springboot+vue+elementui实现海底世界售票系统(代码片段)
作者主页：编程指南针作者简介：Java领域优质创作者、CSDN博客专家、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷... 查看详情