学习淘淘商城第二十课(实现图片上传功能)

来源:互联网 发布:hp网络打印机设置ip 编辑:程序博客网 时间:2024/06/16 07:03
上节课我们一起学习了搭建一个单机版的FastDFS图片服务器以及使用FastDFS-Client进行简单的文件上传操作测试,这节我们一起学习项目中添加商品时上传图片的问题,目前上传图片还没有实现,如下图所示。


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


        流程是这样的,页面加载完之后,会自动调用TAOTAO.init进行初始化,如下图所示。


        TAOTAO在common.js中定义,我们来看下common.js,可以看到TAOTAO=TT都是在这里定义的,在init方法中this.initPicUpload(data);用来初始化上传组件。初始化上传组件中就有我们在jsp页面中定义的类picFileUpload,由于上传操作可能不只一个地方调用,因此$(".picFileUpload").each(function(i,e){来对所有调用上传的页面的组件进行初始化。如果已经上传过图片,现在处于编辑状态的话,那么就使用_ele.siblings(".pics").find("ul").append来加载原来已经添加过的图片。点击上传图片按钮后,就会加载富文本编辑的上传图片界面,富文本编辑器的参数是在上面var TT=TAOTAO={的下面,指定了上传文件参数的名称,请求的url是/pic/upload,上传类型是image、flash、media、file四种。


        下面我们来实现图片上传功能

第一步:导包

     上传图片需要依赖commons-io和commons-fileupload开发包,我们需要在taotao-manger-web工程的Maven依赖中查一下是否有这两个包,目前是有commons-io-1.3.2.jar这个包的(它是在taotao-manager-common中依赖的,而taotao-manager-web依赖了taotao-manager-common,因此它也有这个包了),但目前没有commons-fileupload,因此我们需要在taotao-manager-web的pom.xml文件中添加对commons-fileupload的依赖。


         添加的依赖如下,由于在taotao-parent当中统一定义了版本号,因此这里不用指定版本号。

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <dependency>  
  2.         <groupId>commons-fileupload</groupId>  
  3.         <artifactId>commons-fileupload</artifactId>  
  4.     </dependency>  

第二步:配置文件上传解析器

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

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <!-- 配置文件上传解析器 -->  
  2.     <bean id="multipartResolver"  
  3.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  4.         <!-- 设定默认编码 -->  
  5.         <property name="defaultEncoding" value="UTF-8"></property>  
  6.         <!-- 设定文件上传的最大值5MB,5*1024*1024 -->  
  7.         <property name="maxUploadSize" value="5242880"></property>  
  8.     </bean>  

第三步:配置访问图片前缀

      我们在访问图片时是以http的方式访问的,例如http://192.168.156.13:8888/group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg,从上节课我们知道图片服务器返回的图片路径是group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg,也就是说没有前面那部分路径,我们不能在代码中写死前缀,因为IP及端口号都有可能更改,因此最好是放到配置文件当中,我们在resource目录下新建一个resource.properties文件,配置文件中输入IMAGE_SERVER_URL=http://192.168.156.13:8888/,这里输入端口8888是因为我在图片服务器的nginx当中配置的访问端口是8888,如果端口是默认的80端口的话,可以直接输入IMAGE_SERVER_URL=http://192.168.156.13/即可,下图所示。

   

 第四步:加载配置文件

        我们在第三步新建了resource.properties,在spring中我们需要加载该配置文件,因此我们在springmvc.xml中加入<context:property-placeholder location="classpath:resource/resource.properties"/>,如下图所示。


      当前springmvc.xml文件的完整内容如下

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"  
  4.     xmlns:context="http://www.springframework.org/schema/context"  
  5.     xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"  
  6.     xmlns:mvc="http://www.springframework.org/schema/mvc"  
  7.     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd  
  8.         http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd  
  9.         http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd  
  10.         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">  
  11.          
  12.     <!-- 加载配置文件 -->  
  13.     <context:property-placeholder location="classpath:resource/resource.properties"/>      
  14.     <!-- 配置注解驱动 -->  
  15.     <mvc:annotation-driven />  
  16.     <!-- 视图解析器 -->  
  17.     <bean  
  18.         class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
  19.         <property name="prefix" value="/WEB-INF/jsp/" />  
  20.         <property name="suffix" value=".jsp" />  
  21.     </bean>  
  22.     <!-- 配置包扫描器,扫描@Controller注解的类 -->  
  23.     <context:component-scan base-package="com.taotao.controller"/>  
  24.       
  25.     <!-- 配置资源映射 -->  
  26.     <mvc:resources location="/css/" mapping="/css/**"></mvc:resources>  
  27.     <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>  
  28.       
  29.     <!-- 多媒体解析器 -->  
  30.     <!-- 配置文件上传解析器 -->  
  31.     <bean id="multipartResolver"  
  32.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  33.         <!-- 设定默认编码 -->  
  34.         <property name="defaultEncoding" value="UTF-8"></property>  
  35.         <!-- 设定文件上传的最大值5MB,5*1024*1024 -->  
  36.         <property name="maxUploadSize" value="5242880"></property>  
  37.     </bean>  
  38.       
  39.     <!-- 引用dubbo服务 -->  
  40.     <dubbo:application name="taotao-manager-web"/>  
  41.     <dubbo:registry protocol="zookeeper" address="192.168.156.14:2181"/>    
  42.     <dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />  
  43.     <dubbo:reference interface="com.taotao.service.ItemCatService" id="itemCatService" />  
  44. </beans>  
第五步:创建Controller

       我们需要新建一个PictureController类来处理上传操作,如下图所示。



      上图中@Value("${IMAGE_SERVER_URL}")是为了注入我们在配置文件resource.properties中配置的图片访问前缀。@RequestMapping("/pic/upload")指定上传文件请求的url,与下图指定url一样,上图的public Map uploadFile(MultipartFile uploadFile) 参数"uploadFile"与下图的上传文件的方法参数名称是要求一样的。


       那么方法uploadFile应该返回什么样的格式呢,我们可以从kindeditor官网http://kindeditor.NET/docs/upload.html查看一下,如下图所示,可以看到返回值格式是json串,那么我们便有三种实现方式。第一种是直接返回Map格式的数据,json和Map数据都是key和value的形式,因此返回Map是没问题的。第二种是创建一个POJO类,该类有三个属性,分别是error、url、message,然后将该类转换为json之后返回。第三种是将Map转变为json字符串返回。这里我们暂且使用第一种方式。


       现把Controller类代码粘贴如下

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. package com.taotao.controller;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. import org.springframework.beans.factory.annotation.Value;  
  7. import org.springframework.stereotype.Controller;  
  8. import org.springframework.web.bind.annotation.RequestMapping;  
  9. import org.springframework.web.bind.annotation.ResponseBody;  
  10. import org.springframework.web.multipart.MultipartFile;  
  11.   
  12. import com.taotao.utils.FastDFSClient;  
  13.   
  14. @Controller  
  15. public class PictureController {  
  16.   
  17.     @Value("${IMAGE_SERVER_URL}")  
  18.     private String IMAGE_SERVER_URL;  
  19.       
  20.     @RequestMapping("/pic/upload")  
  21.     @ResponseBody  
  22.     public Map uploadFile(MultipartFile uploadFile) {  
  23.         Map result  = new HashMap<>();  
  24.         try {  
  25.             //1.接收上传的文件  
  26.             //2.获取扩展名  
  27.             String orignalName = uploadFile.getOriginalFilename();  
  28.             String extName = orignalName.substring(orignalName.lastIndexOf(".")+1);  
  29.             //3.上传到图片服务器  
  30.             FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");  
  31.             String url = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);  
  32.             url = IMAGE_SERVER_URL + url;  
  33.             result.put("error", 0);  
  34.             result.put("url", url);  
  35.             return result;  
  36.         }  catch (Exception e) {  
  37.             e.printStackTrace();  
  38.             result.put("error", 0);  
  39.             result.put("message", "上传图片失败!");  
  40.             return result;  
  41.         }  
  42.     }  
  43. }  
      这样我们便配置完了,现在我们试试图片上传功能,如下图所示,发现点击"开始上传"之后图片正常回显了。我们点击"全部插入"按钮。

       点击"全部插入"按钮之后可以看到在"上传图片"按钮的下方有我们刚才上传的三张图片,我们是可以点击任何一张图片在浏览器中浏览的,比如我们点击第三张图片。

        在浏览器中访问的效果如下图所示。这样我们的图片上传功能便实现了。



 


0 0