分析一下图片上传相关的前端页面
上文我们使用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