8、图片上传(springmvc笔记)

  • 1、环境(工程springmvc-mybatis07
    这里需要相关的jar包来实现图片上传
commons-fileupload-1.3.1.jar
commons-io-2.4.jar
  • 2、需求
    在商品修改页面添加图片上传的功能
  • 3、springmvc中对多部件类型的解析
    form表单中提交enctype="multipart/form-data"的数据时,需要springmvcmultipart类型的数据进行解析。在springmvc.xml中配置multipart类型解析器。
<!-- 文件上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设置上传文件的最大尺寸为5MB -->
    <property name="maxUploadSize">
        <value>5242880</value>
    </property>
</bean>

注意:一定要配上maxUploadSize,不然参数绑定会失败。

  • 4.前台页面中
    editItems.jsp
<form id="itemForm" action="${pageContext.request.contextPath }/items/editItemsSubmit.action" method="post"
                                                        enctype="multipart/form-data">
    <input type="hidden" name="id" value="${items.id }" /> 修改商品信息:
    <table width="100%" border=1>
        <tr>
            <td>商品名称</td>
            <td><input type="text" name="name" value="${items.name }" /></td>
        </tr>
        <tr>
            <td>商品价格</td>
            <td><input type="text" name="price" value="${items.price }" /></td>
        </tr>
        <tr>
            <td>商品生产日期</td>
            <td><input type="text" name="createtime" value="<fmt:formatDate value="${items.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td><c:if test="${items.pic !=null}">
                    <img src="/pic/${items.pic}" width=100 height=100 /><br />
                </c:if>
                <input type="file" name="items_pic" value="${items.pic}"/>
            </td>
        </tr>
        <tr>
            <td>商品简介</td>
            <td><textarea rows="3" cols="30" name="detail">${items.detail }</textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="提交" /></td>
        </tr>
    </table>
</form>

说明:我们需要在form表单的属性中添加enctype="multipart/form-data",同时在表单中加入图片上传按钮。

  • 5、创建虚拟目录用来存储图片
    双击我们的tomcat服务器:点击下方的modules

    1

    点击Add External Web Module:
    2

    首先选择我们存放图片的真实目录,然后创建一个虚拟目录,虚拟目录/pic只是用来后面放访问的路径。也可以修改tomcatconf/server.xml文件,添加虚拟目录:
    3

    配置好之后我们启动tomcat可以在浏览器中使用地址http://localhost:8080/pic/bizhi001.jpg访问图片bizhi001.jpg
    注意:在图片虚拟目录中,一定将图片目录分级创建(提高io性能),一般我们采用按日期(年月日)进行分级创建。

  • 6、Controller方法

@RequestMapping("/editItemsSubmit")
public String editItemsSubmit(
        Model model,
        HttpServletRequest request,
        Integer id,
        @ModelAttribute("items") @Validated(value = { ValidationGroup1.class }) ItemsCustom itemsCustom,
        BindingResult bindingResult,
        MultipartFile items_pic) throws Exception {
    
    //获取校验的错误信息
    if(bindingResult.hasErrors()){
        //输出错误信息
        List<ObjectError> allErrors = bindingResult.getAllErrors();
        for(ObjectError error : allErrors){
            //输出错误信息
            System.out.println(error.getDefaultMessage());
        }
        model.addAttribute("allErrors", allErrors);//将错误信息传递到页面
        return "items/editItems";//出错后回到修改页面
    }

    String orginFilename = items_pic.getOriginalFilename();//拿到图片原始名称
    //上传图片
    if(items_pic != null && orginFilename != null && orginFilename.length() > 0){
        //存储图片的物理路径
        String pic_path = "E:\\myeclipse\\picture-tmp\\";
        //新的图片名称
        String newFilename = UUID.randomUUID() + orginFilename.substring(orginFilename.lastIndexOf("."));
        //新的图片
        File newFile = new File(pic_path + newFilename);
        
        //将内存中的数据写入磁盘
        items_pic.transferTo(newFile);
        
        //如果上传成功,要将图片名称写到itemsCustom中
        itemsCustom.setPic(newFilename);
    }
    
    itemsService.updateItems(id, itemsCustom);
    
    //我们也可以不使用注解,而直接使用model将pojo数据回显到页面
    //model.addAttribute("items", itemsCustom);
    //model.addAttribute("id", id);
    
    return "forward:queryItems.action";
}

说明:此时我们在点击商品展示页面中的修改按钮之后就可以将图片上传上去了,而注意,必须使用MultipartFile items_pic进行参数绑定,这个名字和前端页面中的图片名字必须是一致的,否则参数绑定不成功。

问题:这里出现了一个问题,就是我第一次点击修改按钮将图片上传到数据库中然后刷新,再次点击修改按钮,发现图片是可以回显的,但是当我什么也不修改,直接点击提交时会将数据库中的图片字段给清除。测试了一下,应该是这样,当我们再次点击修改的时候确实是将数据绑定到ItemsCustom中的pic属性上的,但是提交的时候页面中name="items_pic",这样是不能将数据赋给ItemsCustom中的pic属性的,于是就是为空,提交之后就将数据库中的数据清空了,在网上找了一通,都是贴代码,而且很少有全的,所以暂时还未解决。

问题未解决。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容