SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目 图片上传并查看功能实现汇总
SSM项目下的图片上传:
1.前端Js代码:用户点击“上传头像”按钮后,会执行uploadPhoto()的方法。
<button type="button" class="layui-btn upload-img" onclick="uploadPhoto()"><i class="layui-icon"></i>上传头像
</button>
<input type="file" id="photo-file" style="display:none;" onchange="upload()">
2.uploadPhoto()方法的代码:会点击上面写的type=file的input标签,然后触发onchange,执行upload()方法。
function uploadPhoto(){$("#photo-file").click();
}
3.upload()方法代码如下!大致意思就是:获取当前用户选择的第一张图片,然后调用ajax请求,将图片数据往后端传递。
function upload(){if($("#photo-file").val() == '')return;var formData = new FormData();formData.append('photo',document.getElementById('photo-file').files[0]);$.ajax({url:'../../common/file/upload_photo',type:'post',data:formData,contentType:false,processData:false,success:function(result){if(result.code === 0){$("#photo-view").attr('src','../../common/file/view_photo?filename='+result.data);$("#photo-val").val(result.data);layer.alert(result.msg, {icon: 6}, function () {updateUserInfo();});}else{layer.alert(result.msg, {icon: 5});}},error:function(){layer.alert("网络错误,上传失败!", {icon: 5});}});}
4.后端Controller层代码实现如下。大致意思就是:将图片存到本地,然后把图片的路径返回给前端。
@Controller("FileController")
@RequestMapping("/common/file")
public class FileController {private Logger logger = LoggerFactory.getLogger(FileController.class);@Autowiredprivate ResourceLoader resourceLoader;/*** 上传图片统一处理* @param photo* @param request* @return*/@RequestMapping(value="/upload_photo",method= RequestMethod.POST)@ResponseBodypublic ResponseVo<String> uploadPhoto(MultipartFile photo, HttpServletRequest request){if(photo == null){return ResponseVo.errorByMsg(CodeMsg.PHOTO_EMPTY);}//检查上传文件大小 不能超过1MBif(photo.getSize() > 1 * 1024* 1024) {return ResponseVo.errorByMsg(CodeMsg.PHOTO_SURPASS_MAX_SIZE);}//获取文件后缀String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".")+1,photo.getOriginalFilename().length());if(!CommonUtil.isPhoto(suffix)){return ResponseVo.errorByMsg(CodeMsg.PHOTO_FORMAT_NOT_CORRECT);}String path = request.getContextPath();String savePath = RuntimeConstant.BASE_UPLOAD_PHOTO_PATH + CommonUtil.getFormatterDate(new Date(), "yyyyMMdd") + "\\";File savePathFile = new File(savePath);if(!savePathFile.exists()){//若不存在改目录,则创建目录savePathFile.mkdir();}String filename = new Date().getTime()+"."+suffix;logger.info("保存图片的路径:{}",savePath + filename);try {//将文件保存至指定目录photo.transferTo(new File(savePath + filename));}catch (Exception e) {e.printStackTrace();return ResponseVo.errorByMsg(CodeMsg.SAVE_FILE_EXCEPTION);}String filepath = "../resources/upload/" + CommonUtil.getFormatterDate(new Date(), "yyyyMMdd") + "/" + filename;return ResponseVo.successByMsg(filepath, "图片上传成功!");}
5.前端ajax回调函数中将返回的路径赋值到对应form表单下面的input标签中,方便后面表单提交时候,将图片路径信息一起传到后端,存到数据库中。
注意:这里name属性必须和你后端的实体字段对应,要不然传不过去。同时后端实体要实现Getter/Setter方法
<input type="hidden" name="headPic" id="photo-val" value="" />
6.图片查看功能实现:同样还是在前面的Controller文件中实现一个查看图片的方法:
/*** 系统统一的图片查看方法* @param filename* @return*/@RequestMapping(value="/view_photo")@ResponseBodypublic ResponseEntity<?> viewPhoto(@RequestParam(name="filename",required=true)String filename){String uploadPhotoPath = RuntimeConstant.BASE_UPLOAD_PHOTO_PATH;String fileDate = CommonUtil.getFileDate(filename); //取得文件路径中的日期部分logger.info("文件路径中日期部分:{}",fileDate);filename = "\\" + filename.substring(filename.lastIndexOf("/") + 1); //取得文件名Resource resource = resourceLoader.getResource("file:" + uploadPhotoPath + fileDate + filename);logger.info("查看图片路径:{}",uploadPhotoPath + fileDate + filename);try {return ResponseEntity.ok(resource);} catch (Exception e) {return ResponseEntity.notFound().build();}}
采用如下代码调用:filename=后面写上你数据库中图片字段的值。就OK了!
<img id="photo-view" src="../../common/file/view_photo?filename=${HOME_USER.headPic}">
SpringBoot项目下的图片上传:
SSM是将图片存储到WebApp文件夹下面,SpringBoot是将图片存储到resources文件夹下面。因此只需修改后端存储路径的代码,其他和SSM保持一致:
/*** 图片统一上传类* @param photo* @return*/@RequestMapping(value="/upload_photo",method=RequestMethod.POST)@ResponseBodypublic ResponseVo<String> uploadPhoto(@RequestParam(name="photo",required=true)MultipartFile photo){//判断文件类型是否是图片String originalFilename = photo.getOriginalFilename();//获取文件后缀String suffix = originalFilename.substring(originalFilename.lastIndexOf("."),originalFilename.length());if(!uploadPhotoSufix.contains(suffix.toLowerCase())){return ResponseVo.errorByMsg(CodeMsg.UPLOAD_PHOTO_SUFFIX_ERROR);}//photo.getSize()单位是Bif(photo.getSize()/1024 > uploadPhotoMaxSize){CodeMsg codeMsg = CodeMsg.UPLOAD_PHOTO_ERROR;codeMsg.setMsg("图片大小不能超过" + (uploadPhotoMaxSize/1024) + "M");return ResponseVo.errorByMsg(codeMsg);}//准备保存文件File filePath = new File(uploadPhotoPath);if(!filePath.exists()){//若不存在文件夹,则创建一个文件夹filePath.mkdir();}filePath = new File(uploadPhotoPath + "/" + StringUtil.getFormatterDate(new Date(), "yyyyMMdd"));//判断当天日期的文件夹是否存在,若不存在,则创建if(!filePath.exists()){//若不存在文件夹,则创建一个文件夹filePath.mkdir();}String filename = StringUtil.getFormatterDate(new Date(), "yyyyMMdd") + "/" + System.currentTimeMillis() + suffix;try {photo.transferTo(new File(uploadPhotoPath+"/"+filename)); //把文件上传} catch (IllegalStateException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}log.info("图片上传成功,保存位置:" + uploadPhotoPath +filename);return ResponseVo.success(filename);}
SpringBoot + Vue项目下的图片上传:
因为前后端分离,我们只需在前端代码Axios请求中做相应的修改,其他代码和SpringBoot保持一致:
upload(){let _this = this;if($("#photo-file").val() === '')return;let config = {headers:{'Content-Type':'multipart/form-data'}};let formData = new FormData();formData.append('photo',document.getElementById('photo-file').files[0]);// 普通上传_this.$ajax.post(process.env.VUE_APP_SERVER + "/photo/upload_photo", formData, config).then((response)=>{let resp = response.data;if(resp.code === 0){$("#photo-view").attr('src', process.env.VUE_APP_SERVER + '/photo/view?filename=' + resp.data);_this.form.headPic = resp.data;_this.$message.success(resp.msg);}else{_this.$message.error(resp.msg);}$("#photo-file").val("");});
}
查看图片方式采用Vue中的filter来实现:
<img :src="form.headPic|filterPhoto" id="photo-view" style="width:100px; height:70px;" />
filters:{filterPhoto(img){return process.env.VUE_APP_SERVER + "/photo/view?filename=" + img;}}
完结!
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目 图片上传并查看功能实现汇总相关推荐
- 前后端分离之图片上传服务端处理方法
最近公司做的项目基本上都是用的前后端分离的架构进行的.在图片上传这块处理是先将图片上传到开发者服务器上,然后返回该图片在服务器上的图片地址存到数据库中.存到数据库的时候存的并不是网络地址,而是图片的相 ...
- 前后端分离实现图片上传的功能
由于最近开发的项目需要有上传图片的功能,并且能够让上传的图片能够在网页上预览出来.所以写下此篇文章,记录一下学习到的知识. 1,前端 前端项目是采用angularjs框架搭建的.图片上传功能在前端的代 ...
- 前后端分离实现图片上传
由于我有点赶,就没有将按照标准去写service和serviceImpl了,请见谅 目录 目录 1.准备阶段1.1数据库 1.2相关的类 1.2.1 UserImg与数据库的表相对应 1.2.2 ...
- 阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目 最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- 基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
本文目录 前言 做项目的三大好处 强强联手(天狗组合) 专栏作者简介 专栏的优势 后端规划 1. SpringBoot 和 SpringCloud 的选择 2. Mybatis 和 MybatisPl ...
- SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备 后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
- SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇 前端篇 创建vue项目 安装所需工具 开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
- phython在file同时写入两个_喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
最新文章
- 让数百万台手机训练同一个模型?Google把这套框架开源了
- 2021年度总结——做好事不留名·CSDN中的【雷锋】
- nginx开发简单的http模块
- c#获取pdf文件页数
- Centos 7 定时关机
- 从 JavaScript 到 TypeScript
- RabbitMQ学习之(二)_Centos6下安装RabbitMQ及管理配置
- 安装各种工具/第三方库(随时更新)
- Kettle下载资源
- 如何阅读mysql源代码_我是如何开始阅读MySQL源码的?
- 三角函数常用公式总结
- 豆瓣250信息爬取及保存到excel中
- Linux 杀毒软件ClamAV离线安装部署
- selenium 使用带密码的socks5代理方法
- 夜神模拟器adb查看log
- Unity将内部模型转换成stl格式模型,用于3D打印机进行打印
- kali使用笔记本自带无线网卡_笔记本无线网卡有哪几种 有必要升级吗
- js之生成并下载txt文件
- URL格式java_URLConnection格式与用法
- 怎样测试IP 是否在
热门文章
- 机器学习系列 | 线性回归模型(简单线性回归、局部线性回归、非线性关系)
- java descriptor_Descriptor
- 8月21日云栖精选夜读:Q1财报天猫交易额增速达49%,背后有哪些新技术支撑?...
- 关于eclipse导入项目出现红色叉或者红色感叹号的各种处理方法(包括报错Multiple markers at this line)
- update case when 多字段,多条件, mysql中case when用法
- php 安装fileinfo扩展
- 《恋爱的犀牛》情节和语录
- 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
- 51单片机 串口通信 中断
- 全志A40i最新工控平台处理器参数规格介绍