1.上传图片效果展示

点击上传图片，弹出图片上传框

点击添加图片，可以批量添加图片

然后点击开始上传，会分批次上传图片。

这里没有提示，但是已经上传成功了。然后点击全部插入，图片就会被显示到新增商品的表单里面。

2.前端分析

在item-add.jsp，会先执行$(function(){})，创建富文本编辑器，然后执行TAOTAO.init()函数

由于esayui是单页面的，所以TAOTAO.init()函数在common.js中，只要lindex.jsp引入后，其他附属页面都可以用。

init初始化图片上传组件和初始化选择类目组件。

在initPicUpload函数中，为class：picFileUpload，绑定了一堆事件和属性，页面初始化完成。

当用户点击上传图片按钮后，会触发picFileUpload这个class绑定的事件。

再看initPicUpload函数，循环为class：picFileUpload绑定事件与属性

var _ele = $(e);将按钮节点转为jquery对象。_ele.siblings("div.pics").remove();找到div.pics的兄弟节点。

_ele.after('<div class="pics"><ul></ul></div>');为_ele添加ul。给按钮节点添加onclick事件，然后打开图片上传的窗口。

KindEditor.editor(TT.kingEditorParams)创建图片上传的窗口，TT.kingEditorParams中包含上传文件名、上传url、文件类型。

最后循环创建li，添加到前面创建的ul中，回显图片。将url放到imgArray数组中。

form.find("[name=image]").val(imgArray.join(","));将图片的url放到表单中的隐藏域。

editor.hideDialog(); 关闭图片上传窗口

3.后端代码编写

由于只是图片上传，所以服务层不用编写代码，只编写表现层（taotao-manager-web）代码即可

3.1导包

需要把commons-io、fileupload 的依赖添加到工程中

commons-io这个jar包的(它是在taotao-common工程的Maven依赖中，而taotao-manager-web依赖了taotao-common，因此它也有了这个jar包)，但目前没有commons-fileupload，因此我们需要在taotao-manager-web工程的pom.xml文件中添加对commons-fileupload的依赖。

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
</dependency>

3.2配置文件上传解析器

在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>

3.3配置访问图片前缀

我们在访问图片时是以http的方式访问的，例如http://192.168.25.133/group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，从上文中我们知道图片服务器返回的图片路径是group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg，也就是说没有前面那部分路径，即http://192.168.25.133/，而我们又不能在代码中写死前缀，因为IP及端口号都有可能更改，因此最好是放到配置文件当中，我们在src/main/resources/resource目录下新建一个resource.properties文件，配置文件中输入IMAGE_SERVER_URL=http://192.168.25.133/

3.4加载配置文件

使用spring加载resource.properties

<context:property-placeholder location="classpath:resource/resource.properties" />

3.5编写cotroller

package com.taotao.controller;

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

import org.springframework.beans.factory.annotation.Value;
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 com.taotao.utils.FastDFSClient;

@Controller
public class PictureController {
	@Value("${IMAGE_SERVER_URL}")
	private String IMAGE_SERVER_URL;
	
	@RequestMapping("/pic/upload")
	@ResponseBody
	public Map<Object, Object> fileUpload(MultipartFile uploadFile) {
		try {
			//1.使用字节数组接受文件内容
			byte[] content = uploadFile.getBytes();
			//2.取出文件名
			String originalFilename = uploadFile.getOriginalFilename();
			String ext = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
			//3、创建一个FastDFS的客户端
			FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/fast_dfs.conf");
			//4、执行上传处理
			String path = fastDFSClient.uploadFile(content, ext);
			//4、拼接返回的url和ip地址，拼装成完整的url
			String url = IMAGE_SERVER_URL + path;
			//6、返回map
			Map<Object, Object> result = new HashMap<>();
			result.put("error", 0);
			result.put("url", url);
			return result;
		} catch (Exception e) {
			//6、返回map
			Map<Object, Object> result = new HashMap<>();
			result.put("error", 1);
			result.put("message", "图片上传失败");
			return result;
		}
	}
}

这里返回map的原因是kindeditor文件上传，要求的返回值如下。

4.测试上传图片

上传成功

淘淘商城12-商城后台新增商品之KindEditor上传图片