Java实现图片上传功能(前后端:vue+springBoot)
Java实现图片上传功能(前后端:vue+springBoot)
- 前言:
- 前端:
- 组件引入
- 基础文件上传
- 自定义上传方法
- 后端:
- 需要引入的jar包:
- 基础文件上传
- Controller层:
- server层:
- 自定义的多参数接口
前言:
我们在设计自己的网站的时候,一定会遇到上传图片的功能,比如:用户头像,商品图片。
这篇文章将带着大家设计一个可以使用的图片上传功能,请大家一步一步来,让我们在码路上越走越远。
前端:
组件引入
前端我们使用element-ui的组件。我这里以html加js的方式
1:引入vue.js,axios.js,element-ui。
<script src="../static/js/util/vue.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>
基础文件上传
2:element-ui中有多个例子,我们使用其中一个:
<el-uploadclass="avatar-uploader"action="/Manage/upBusinessImage":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload><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><script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}}
</script>
上面是element-ui中的一个例子。我将会对其中的各个参数进行讲解。
其中的样式,我们不进行讲解,直接复制就可以。
el-upload中的参数:
action:后面是接口url,图片文件将会发送到该接口中。
:show-file-list:是否显示上传的图片列表
:on-success:上传成功后要执行的操作,“:”代表与js代码进行了绑定。
:before-upload:上传之前要执行的操作,比如检验是否是图片文件,图片的大小是否符合要求等。
在它的一个函数中使用了URL.createObjectURL(file.raw);方法,这个地方要注意:elementUI中,自带的方法中的file,并不是指图片本身,而是他的一个dom。如果要是拿他的图片,就要用file.raw。
自定义上传方法
通过上面的方式就可以将图片文件发送给后端,但是,这个只是基础的功能,往往我们的业务不会如此简单,比如:我们可能将商品id,等信息一同发送后端,以保证后端确定图片的作用。此时上面的方式就满足不了我们的需求了。
为此我们需要设计自己的上传方法。于是改造过程:
1:action后面的路径改为空:action=“”
2:添加属性:http-request,后面跟自定义的方法名,例如::http-request=“uploader”
3:在js中书写自定义方法“uploader”
async uploader(params){let file = params.file;let clothesId;let styleId;let imgUrl;clothesId = this.goodsModify.goodsId;styleId = this.goodsModify.styleId;imgUrl = this.goodsModify.goodsImgformData = new FormData();formData.append('file', file);formData.append('clothesId',clothesId);formData.append('styleId',styleId);formData.append('imgUrl',imgUrl);let data = await axios.post("/Manage/upBusinessImage",formData)},
说明一下如果要传递的是多个参数,则必须把多个参数整理成formData的形式进行发送。而到后端则需要用@RequestParam注解标识进行接收。
后端:
需要引入的jar包:
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.11.0</version>
</dependency>
基础文件上传
Controller层:
@RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file) {return fileService.uploadImage(file,"D:/img/HeadImages/");}
因为只传递了文件,所以只需要一个MultipartFile类型的file接收就可以了。
server层:
//上传操作private CommonResultVo uploadImage(MultipartFile file,String folder){if (file == null) {return CommonResultVoUtil.error("请选择要上传的图片");}if (file.getSize() > 1024 * 1024 * 10) {return CommonResultVoUtil.error("文件大小不能大于10M");}//获取文件后缀String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1, file.getOriginalFilename().length());if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {return CommonResultVoUtil.error("请选择jpg,jpeg,gif,png格式的图片");}String savePath = folder;File savePathFile = new File(savePath);if (!savePathFile.exists()) {//若不存在该目录,则创建目录savePathFile.mkdir();}//通过UUID生成唯一文件名String filename = UUID.randomUUID().toString().replaceAll("-","") + "." + suffix;try {//将文件保存指定目录//file.transferTo(new File(savePath + filename));//File file1 = new File(file.getOriginalFilename());FileUtils.copyInputStreamToFile(file.getInputStream(),new File(savePath + filename));} catch (Exception e) {e.printStackTrace();return CommonResultVoUtil.error("保存文件异常");}//返回文件名称return CommonResultVoUtil.successWithData(filename,1);}
代码里的CommonResultVoUtil是我自定义的结果工具类,大家可以根据自己的需求自己构建,也可直接返回字符串成功或者失败。
自定义的多参数接口
与上面的区别只是多使用了几个参数:
@RequestMapping(value = "/Manage/upBusinessImage",method = RequestMethod.POST)public CommonResultVo uploadBusinessImage(@RequestParam(value = "file", required = false) MultipartFile file,@RequestParam(value = "clothesId", required = false) String clothesId,@RequestParam(value = "styleId", required = false) String styleId,@RequestParam(value = "imgUrl", required = false) String imgUrl) {return fileService.uploadBusinessImage(file,clothesId,styleId,imgUrl);}
拿到这些参数后可以根据某些参数去定位数据库中的某条记录,然后将图片位置保存入数据库中,以便后续访问。
先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦
Java实现图片上传功能(前后端:vue+springBoot)相关推荐
- java多图片上传功能的实现
开发环境:jdk1.7,MyEclipse10 框架用的是spring.用到了maven工具(maven的包百度下就可以). 四步完成,全部复制改参数就可以 第一步:先在Spring中对图片进行限制 ...
- html +java 图片上传的前后端代码
tip:前端ajax提交form 表单通过文件名获取资源文件 通过流执行文件上传以及把数据库地址存放 数据库中
- php layui ajax多图上传,Laravel+Layer实现图片上传功能(整理篇)
♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码 ...
- html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能(图文详解上篇)...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 因为最近一段时间,一直在弄微信项目,其中涉及到 ...
- java的图片上传与前端展示实例(Servlet+Jsp)
java的图片上传与前端展示实例(Servlet+Jsp) 内容前瞻 1.关于路径 2.前端图片上传与展示 3.后台获取并保存 环境 1.前端jsp 2.服务器tomcat 3.服务端servlet ...
- ckeditor5图片上传功能的使用
如果想使用ckeditor5中的图片上传功能,就无法在项目中通过npm的方式来安装ckeditor,而是需要在https://ckeditor.com/ckeditor-5/online-builde ...
- 百度编辑器图片上传功能解疑
最头疼的上传图片问题 版本选择和自定义配置 项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里. 我使用的环境是.NET MVC3 最头疼的上传图片问题 ...
- Java实现图片上传到服务器
Java实现图片上传到服务器 #这几天研究图片上传到服务器并回显到页面遇到了问题,在这里总结一下!希望对各位有用!!! 先上代码 jsp代码: <form id="myform&quo ...
- 人人网的相册里图片上传功能是怎样实现的
大侠们,给我讲解下类似于人人网的相册里,图片上传功能是怎么实现的,它可以批量上传.我的想法是实现一个批量上传图片的功能,1.可以让用户同时选择多个图片上传.2.上传后会显示出来,并且可以单独对某张图进 ...
最新文章
- Seq2Seq实现闲聊机器人
- ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full comm
- 详解云原生机器学习平台的优势
- TCP/IP学习——利用主机IP与子网掩码计算网络号
- php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)...
- Nodejs实现WebSocket通信demo
- YBTOJ:魔法数字(数位dp)
- k8s核心技术-集群安全机制(RBAC实现鉴权)---K8S_Google工作笔记0040
- hashMap 和linkedHashMap
- 数论之勾股数组(毕达哥拉斯三元组)
- 计算机软件技术基础_「连载」信息技术基础题型归纳之计算机软件2
- Qt:多线程--子线程间通讯
- Cadence Orcad Capture定时保存功能介绍图文视频教程
- AI2(App Inventor 2)离线版服务器(2019.8.25更新)
- win7修复计算机无法修复工具栏,WIN7多系统启动引导修复工具BCDautofix v1.3
- 221.Beta多样性PCoA和NMDS排序
- 如何有效去除博客上的广告
- linux中dns服务故障,Linux DNS服务器故障解决
- FL Studio21水果软件最新中文版安装教程
- Java集合框架——List接口
热门文章
- vue移动端、PC自适应(配置postcss-px2rem)
- Linux网络编程 | TCP状态转换【2MSL】
- 一个包含动态变量的短信模板设计分析
- 【收藏级】MySQL 100条命令,基本操作的所有内容(常看常新)
- 2018年支付宝推荐赏金活动介绍
- 选中一行或多行的快捷键
- linux僵尸进程杀不掉,杀死僵尸进程,你需要这些神奇高效的 Linux 命令
- Flutter flutter_localizations
- 49.逻辑卷管理4,逻辑卷管理详解,lvscan,lvcreate,lvdisplay,lvextend,lvreduce,lvremove,lvresize,lvchange
- 【卡帕一致性检验(Kappa)】基于SPSS软件实现