概述

关于结合Spring + Spring MVC 实现文件上传下载，之前总结了几篇

Spring MVC-09循序渐进之文件上传(基于Apache Commons FileUpload)

Spring MVC-09循序渐进之文件上传(基于Servlet3.0+内置功能)

Spring MVC-09循序渐进之文件上传(基于Servlet3.0+Html5客户端上传文件)

Spring MVC-10循序渐进之文件下载

这里我们选择使用基于Apache Commons FileUpload的方式

Maven依赖

 <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.2</version></dependency>

文件上传解析器bean的配置

/o2o/src/main/resources/spring/spring-web.xml

 <!-- 文件上传解析器 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"></property><property name="maxUploadSize" value="10485760000"></property><!-- 最大上传文件大小 --><property name="maxInMemorySize" value="10960"></property></bean>

页面

shopoperation.html增加上传组件

/o2o/src/main/webapp/WEB-INF/html/shop/shopoperation.html

type=“file” ，并且设置id，方便js中操作

<!-- 商铺图片  上传组件--><li class="item-content"><div class="item-inner"><div class="item-inner"><div class="item-title label">商铺图片</div><div class="item-input"><input type="file" id="shop-img"></div></div></div></li>

html尾部引入shopoperation.js

 <!-- 加载自定义的JS --><script type='text/javascript'src='../resources/js/shop/shopoperation.js' charset='utf-8'></script>

shopoperation.js

/o2o/src/main/webapp/resources/js/shop/shopoperation.js

获取shopImg ，(因为只能上传一张图片，所以$(’#shop-img’)[0].files[0]) ，添加到formData中，使用ajax提交到后台

/*** submit按钮触发的操作*/$('#submit').click(function() {// 获取页面的值省略....省略....// 图片var shopImg = $('#shop-img')[0].files[0];// 接收数据var formData = new FormData();// 和后端约定好，利用shopImg和 shopStr接收 shop图片信息和shop信息formData.append('shopImg',shopImg);// 转成JSON格式，后端收到后将JSON转为实体类formData.append('shopStr',JSON.stringify(shop));// 将数据封装到formData发送到后台formData.append('verifyCodeActual',verifyCodeActual);// 利用ajax提交$.ajax({url:registerShopUrl,type:'POST',data:formData,contentType:false,processData:false,cache:false,success:function(data){if(data.success){$.toast('提示信息:'+data.errMsg);}else{$.toast('提示信息:' + data.errMsg);}// 点击提交后 不管成功失败都更换验证码，防止重复提交$('#kaptcha_img').click();}});});

Controller层

/o2o/src/main/java/com/artisan/o2o/web/shopadmin/ShopController#registerShop方法

控制层的方法接收到前端的请求后，从MultipartHttpServletRequest 中获取到CommonsMultipartFile类型的 shopImg，同时为了简化Controller层调用Service层的难度，这里我们对Service的addShop做了改造，这样就避免了将CommonsMultipartFile转换为File，而是通过CommonsMultipartFile的getInputStream()方法，以流的形式作为入参(因为Thumbnail也可以处理流)。

控制层调用Service层，Service层addShop方法根据入参获取到文件的后缀名后，写入shop的基本信息，然后调用工具类获取文件的存储路径，将图片打上水印存入对应的文件目录，最后更新到tb_shop。具体见实战SSM_O2O商铺_10【商铺注册】Service层的实现

@RequestMapping(value = "/registshop", method = RequestMethod.POST)@ResponseBodypublic Map<String, Object> registerShop(HttpServletRequest request) {Map<String, Object> modelMap = new HashMap<String, Object>();// 0. 验证码校验省略......// 1. 接收并转换相应的参数，包括shop信息和图片信息省略......// 1.2 图片信息 基于Apache Commons FileUpload的文件上传// Spring MVC中的 图片存在CommonsMultipartFile中CommonsMultipartFile shopImg = null;// 从request的本次会话中的上线文中获取图片的相关内容CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());if (commonsMultipartResolver.isMultipart(request)) {MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;// shopImg是和前端约定好的变量名shopImg = (CommonsMultipartFile) multipartRequest.getFile("shopImg");} else {// 将错误信息返回给前台modelMap.put("success", false);modelMap.put("errMsg", "图片信息为空");return modelMap;}// 2. 注册店铺if (shop != null && shopImg != null) {// Session TODO// 店主persionInfo的信息，肯定要登录才能注册店铺。// 所以这部分信息我们从session中获取，尽量不依赖前端,这里暂时时不具备条件，后续改造，先硬编码，方便单元测试PersonInfo personInfo = new PersonInfo();personInfo.setUserId(1L);shop.setOwner(personInfo);// 注册店铺// se = shopService.addShop(shop, shopImg); 改造前的调用方式// 这个时候，我们从前端获取到的shopImg是CommonsMultipartFile类型的，如何将CommonsMultipartFile转换为file.// 网上也有将CommonsMultipartFile转换为File的方法，并通过maxInMemorySize的设置尽量不产生临时文件// 这里我们换个思路,因为CommonsMultipartFile可以获取InputStream,Thumbnailator又可以直接处理输入流// 因为InputStream中我们无法得到文件的名称，而thumbnail中需要根据文件名来获取扩展名，所以还要再加一个参数String类型的fileName// 既然第二个和第三个参数都是通过shopImg获取的，为什么不直接传入一个shopImg呢？// 主要是为了service层单元测测试的方便，因为service层很难实例化出一个CommonsMultipartFile类型的实例ShopExecution se = null;;try {se = shopService.addShop(shop, shopImg.getInputStream(), shopImg.getOriginalFilename());if (se.getState() == ShopStateEnum.CHECK.getState()) {modelMap.put("success", true);modelMap.put("errMsg", "注册成功");} else {modelMap.put("success", false);modelMap.put("errMsg", se.getStateInfo());}} catch (IOException e) {e.printStackTrace();modelMap.put("success", false);modelMap.put("errMsg", "addShop Error");}} else {// 将错误信息返回给前台modelMap.put("success", false);modelMap.put("errMsg", "请输入店铺信息");}return modelMap;}

处理成功后，返回前台JSON数据，给用户提示

Github地址

代码地址： https://github.com/yangshangwei/o2o

实战SSM_O2O商铺_15【商铺注册】View层+Controller层之图片上传相关推荐

【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...
商城项目笔记一：搭建Maven工程，利用Dubbo实现SOA面向服务框架，部署zookeeper注册中心，FastDFS框架实现图片上传，部署nginx服务器。
文章目录 1. 商城项目总结笔记: 1.1. 第一天工作记录:搭建Maven工程 1.2. 第二天工作记录:创建SOA面向服务架构,通过工具类实现分页技术 1.3. 第三天工作记录:部署nginx服务 ...
java 框架 Dao层 Mapper层 controller层 service层 model层 entity层简介
目录简介 entity层 mapper层 service层 controller层简介 SSM是sping+springMVC+mybatis集成的框架. MVC即model view contr ...
Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
富文本编辑器Ueditor实战（二）-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
Extjs 扩展Htmleditor，支持图片上传文件上传插入flash 插入多媒体插入层插入横线等功能...
去年对Extjs的富文本框编辑器htmleditor做过扩展,扩展成图片上传和文件上传功能,感觉功能还是不够,原文如下: http://hi.baidu.com/jackvoilet/blog/ite ...
Extjs 扩展Htmleditor，支持图片上传文件上传插入flash 插入多媒体插入层插入横线等功能
最近在做项目的时候感觉还是不完美,于是在此基础上又进行了扩展,目前CJ_StarHtmlEditor支持: 图片上传文件上传插入flash 插入多媒体插入层插入横线等功能,基本上能够满足要求了 ...
如何注册阿里云申请图片上传
该案例是实际开发中注册阿里云实现图片上传 1.在阿里云官网(https://www.aliyun.com/)注册账号: 2. 注册成功后登录阿里云: 3.登录成功后点击右上角"控制台&quo ...
如何注册京东云申请图片上传
该案例是实际开发中注册京东云实现图片上传 1.在京东云官网(https://www.jcloud.com/index)注册账号: 2. 注册成功后登录京东云: 3.登录成功后点击右上角"控制 ...

实战SSM_O2O商铺_15【商铺注册】View层+Controller层之图片上传

文章目录

概述