8、图片上传（springmvc笔记）

2016-07-14 本文已影响557人 yjaal

1、环境（工程springmvc-mybatis07）
这里需要相关的jar包来实现图片上传

commons-fileupload-1.3.1.jar
commons-io-2.4.jar

2、需求
在商品修改页面添加图片上传的功能

3、springmvc中对多部件类型的解析
在form表单中提交enctype="multipart/form-data"的数据时，需要springmvc对multipart类型的数据进行解析。在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只是用来后面放访问的路径。也可以修改tomcat中conf/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属性的，于是就是为空，提交之后就将数据库中的数据清空了，在网上找了一通，都是贴代码，而且很少有全的，所以暂时还未解决。

问题未解决。。。。

8、图片上传（springmvc笔记）

猜你喜欢

热点阅读