SpringMVC实现图片上传

来源：互联网发布：网络图绘制软件 bim 编辑：程序博客网时间：2024/06/05 04:17

tomcat上配置图片虚拟目录，在tomcat中modual视图下
这里写图片描述
在D:/upload文件夹下已经存了几张图片
这样在浏览器，访问http://localhost:8080/picture/佐佐木希.png即可访问D:\upload\佐佐木希.png图片。
商品列表页面如下

当点击修改时，进入修改页面

现在修改好id为3的商品信息后，数据tb_item表中该商品信息应该被修改，同时选择的图片需要保存到D:/upload文件夹下,当下次再列表页面点击修改该商品时，应该回显图片。
回显在修改页面即可处理，如下
1、修改页面itemEdit.jsp中

<body>     <form id="userForm" enctype="multipart/form-data" action="${pageContext.request.contextPath }/updateItem.action" method="post">        <input type="hidden" name="id" value="${item.id }" /> 修改商品信息：        <table width="100%" border=1>            <tr>                <td>标题</td>                <td><input type="text" name="title" value="${item.title }"/></td>            </tr>            <tr>                <td>卖点</td>                <td><textarea rows="3" cols="30" name="sellPoint">${item.sellPoint }</textarea></td>            </tr>            <tr>                <td>价格</td>                <td><input type="text" name="price" value="${item.price }" /></td>            </tr>            <tr>                <td>图片</td>                <td>                    <c:if test="${item.image!=null }">                        <img src="/picture/${item.image }" width="100px" height="100px">                    </c:if>                    <input type="file" name="imageFile" src="/picture/${item.image }"/>                </td>            </tr>            <tr>                <td>销售截止日期</td>                <td><input type="text" name="sellDeadline"                 value='<fmt:formatDate value="${item.sellDeadline }" pattern="yyyy-MM-dd HH:mm:ss"/>' /></td>            </tr>            <tr>                <td colspan="2" align="center"><input type="submit" value="提交" />                </td>            </tr>        </table>    </form></body>

<img src="/picture/${item.image }" width="100px" height="100px">其中${item.image}表示图片名，即存入到数据库中该商品的image字段值。必须跟D:/upload下的图片名一致，这样/picture/${item.image }相当于访问了D:/upload/图片名。

注：完成文件（图片）上传三个条件

表单标签type=file
表单提交方式为post提交
表单提交为多段式提交enctype=”multipart/form-data”

2、引入jar包

    <dependency>        <groupId>commons-io</groupId>        <artifactId>commons-io</artifactId>        <version>2.4</version>    </dependency>    <dependency>        <groupId>commons-fileupload</groupId>        <artifactId>commons-fileupload</artifactId>        <version>1.3.1</version>    </dependency>

3、后台处理:

    @RequestMapping("/updateItem")    public String updateItem(TbItem item,MultipartFile imageFile) throws Exception{        if (imageFile.getOriginalFilename()==null||"".equals(imageFile.getOriginalFilename())){            String img = itemService.findById(item.getId()).getImage();            item.setImage(img);            itemService.updateItem(item);            //重定向到列表页面            return "redirect:/show.action";        }        //生成保存时的文件名        String fileName = UUID.randomUUID().toString().replace("-", "");        //获取文件原始名        String originalFilename = imageFile.getOriginalFilename();        //获取后缀，包含.        String sub = originalFilename.substring(originalFilename.indexOf("."));        //完整文件名        String image = fileName + sub;        //保存文件到D:/upload         imageFile.transferTo(new File("D:"+File.separator+"upload"+File.separator+image));        //设置保存到数据库中商品图片        item.setImage(image);        //更新操作        itemService.updateItem(item);        //重定向到列表页面        return "redirect:/show.action";    }

注意:MultipartFile是接口，但是pictureFile参数接受的是实例化对象。所以配置文件中需要配置实例对象

4、配置文件springmvc.xml中添加

<!-- 配置MultipartFile实现类(解析器)注意:id是不能改的 -->    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

测试：
在下点击id为3的商品进行修改，随便选择个图片
这里写图片描述
信息提交后重定向到列表页面，再次查看该商品信息就能看到商品图片了

查看D:/upload文件下，与数据库tb_item表中id为3的商品图片信息，且两种名称一致。

阅读全文

0 0