FastDFS--4.图片上传

1      Js功能分析

1.1    Index-add.jsp

 

1.2    Index-add.jsp

 

1.3    初始化common.js

init : function(data){
   // 初始化图片上传组件
   this.initPicUpload(data);
   // 初始化选择类目组件
   this.initItemCat(data);
}, 

1.4    初始化图片上传组件common.js

// 初始化图片上传组件
initPicUpload : function(data){
   $(".picFileUpload").each(function(i,e){
      var _ele= $(e);
      _ele.siblings("div.pics").remove();
      _ele.after('\
         <div class="pics">\
             <ul></ul>\
          </div>');
      // 回显图片
       if(data && data.pics){
          var imgs= data.pics.split(",");
          for(var i in imgs){
             if($.trim(imgs[i]).length > 0){
                _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'>" +
         "<img src='"+imgs[i]+"' width='80' height='50'/></a></li>");
             }
          }
       }
       //给“上传图片按钮”绑定click事件
       $(e).click(function(){
          var form= $(this).parentsUntil("form").parent("form");
          //打开图片上传窗口
          KindEditor.editor(E3.kingEditorParams).loadPlugin('multiimage',function(){
             var editor= this;
             editor.plugin.multiImageDialog({
      clickFn : function(urlList) {
         var imgArray= [];
         KindEditor.each(urlList, function(i, data) {
            imgArray.push(data.url);
            form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'>" +
               "<img src='"+data.url+"' width='80' height='50'/></a></li>");
         });
         form.find("[name=image]").val(imgArray.join(","));
         editor.hideDialog();
      }
   });
          });
       });
   });
},

1.5    E3--KindEditor

2      KindEditor文档

2.1    参考文档

使用的是KindEditor的多图片上传插件。

KindEditor 4.x 文档

http://kindeditor.net/doc.php

 

2.2    参数

请求的url：/pic/upload

参数：MultiPartFileuploadFile

返回值：

可以创建一个pojo对应返回值。可以使用map

 

3      后台

3.1    业务逻辑

业务逻辑：

1、接收页面传递的图片信息uploadFile

2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。

3、图片服务器返回图片的url

4、将图片的url补充完整，返回一个完整的url。

5、把返回结果封装到一个Map对象中返回。

 

3.2    添加jar包

需要把commons-io、fileupload 的jar包添加到工程中。

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-io</artifactId>
</dependency>
 
<!-- 新加：文件上传组件 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
</dependency>

3.3    Springmvc.xml--配置多媒体解析器

1、配置多媒体解析器。

<!-- 定义文件上传解析器 -->
<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>

3.4    Controller

package cn.e3mall.controller;

import cn.e3mall.common.utils.FastDFSClient;
import cn.e3mall.common.utils.JsonUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import java.util.HashMap;
import java.util.Map;

/**
 * 图片上传处理Controller
 */
@Controller
public class PictureController {
   
   @Value("${IMAGE_SERVER_URL}")
   private String IMAGE_SERVER_URL;

   @RequestMapping(value="/pic/upload", produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
   @ResponseBody
   public StringuploadFile(MultipartFile uploadFile) {
      try {
         //把图片上传的图片服务器
         FastDFSClient fastDFSClient = new FastDFSClient("classpath:conf/client.conf");
         //取文件扩展名
         String originalFilename =uploadFile.getOriginalFilename();
         String extName =originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
         //得到一个图片的地址和文件名
         String url =fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
         //补充为完整的url
         url = IMAGE_SERVER_URL + url;
         //封装到map中返回
         Map result = new HashMap<>();
         result.put("error", 0);
         result.put("url", url);
         return JsonUtils.objectToJson(result);
      } catch (Exceptione) {
         e.printStackTrace();
         Map result = new HashMap<>();
         result.put("error", 1);
         result.put("message", "图片上传失败");
         return JsonUtils.objectToJson(result);
      }
   }
}

4      解决浏览器兼容性的问题

4.1    分析

KindEditor的图片上传插件，对浏览器兼容性不好。

使用@ResponseBody注解返回java对象，Content-Type:application/json;charset=UTF-8，他的意义在于不走逻辑视图，将返回的数据转换成为json对象

 

返回字符串时：Content-Type:text/plan;charset=UTF-8

 

解决方法：所以都返回为String，就兼容性最好

 

4.2    几点改变

指定响应结果的content-type：

返回json字符串

 

4.3    测试

KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。