淘淘商城第27讲——实现图片上传功能

分析一下图片上传相关的前端页面

上文我们使用FastDFS-Client测试了一下简单的文件上传操作，淘淘商城项目中新增商品时上传图片的功能还没实现，如下图所示。本文将花大量笔墨来教大家如何实现图片上传这个功能。

我们来看下item-add.jsp页面，可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的，在<a>标签的下方是一个隐藏域，是用来接收图片上传到图片服务器的回显地址的，当我们提交表单的时候，可以把这些图片地址保存到数据库中去。

图片上传的流程是这样的，item-add.jsp页面加载完之后，会自动调用TAOTAO.init方法进行初始化，如下图所示。

TAOTAO是在common.js文件中定义的，我们来看下common.js文件，可以看到TAOTAO = TT都是在这里定义的，如下图所示。

下面我们来编码实现图片上传这个功能。

实现图片上传功能

导包

上传图片需要依赖commons-io和commons-fileupload这两个开发包，因此我们需要在taotao-manger-web工程的Maven依赖中查看一下是否有这两个jar包，可以看到目前是有commons-io-1.3.2.jar这个jar包的（它是在taotao-common工程的Maven依赖中，而taotao-manager-web工程依赖了taotao-common工程，因此它也有了这个jar包)。

但目前没有commons-fileupload这个jar包的，因此我们需要在taotao-manager-web工程的pom文件中添加对commons-fileupload的依赖。添加的依赖如下，由于在taotao-parent工程当中统一定义了版本号，因此这里不用再指定版本号了。

<!-- 文件上传组件 -->
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
</dependency>

配置文件上传解析器

我们需要在taotao-manager-web工程的springmvc.xml文件当中配置一下文件上传解析器，如下图所示。

为方便大家复制，现把文件上传解析器的配置贴出：

<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
	class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
	<!-- 设定默认编码 -->
	<property name="defaultEncoding" value="UTF-8"></property>
	<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
	<property name="maxUploadSize" value="5242880"></property>
</bean>

配置访问图片前缀

我们在访问图片时是以http的方式来访问的，例如http://192.168.81.132:8888/group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，从上文中我们知道图片服务器返回的图片路径是group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，也就是说没有前面那部分路径，即http://192.168.81.132:8888/，而我们又不能在代码中写死前缀，因为IP地址及端口号都有可能更改，因此最好是将它们放到配置文件当中。

于是，我们在src/main/resources/resource目录下新建一个resource.properties文件，在配置文件中输入IMAGE_SERVER_URL=http