利用Kindeditor、nginx和FTP实现文件上传

之前图片都是上传到Tomcat中，导致部署新的war包时，原来上传的图片消失了，后来考虑使用nginx+ftp来上传图片到图片服务器。

---

1 首先要加入kindeditor的相关js和css文件，具体的直接在网上搜一个。

---

2 创建一个controller，用于接受前台传递过来的请求。

@Controller
@RequestMapping("/upload")
public class FileUploadController {
    @Autowired
    private FileUploadService fileUploadService;


    @RequestMapping("/saveImage")
    @ResponseBody
    public Map<String, Object> saveImage(HttpServletRequest request,String dirs){

        return fileUploadService.SavepointManager(request,dirs);
    }

}

---

3 然后是service，处理图片上传的具体逻辑。

@Service
public class FileUploadService {

    /**
     * 保存图片
     * @param request
     * @return
     */
    public Map<String, Object> SavepointManager(HttpServletRequest request,String dir){
        // 定义允许上传的文件扩展名  
        HashMap<String, String> extMap = new HashMap<String, String>();  
        extMap.put("image", "gif,jpg,jpeg,png,bmp");  
        Map<String, Object> returnMap = new HashMap<String, Object>();
        // 最大文件大小  
        long maxSize = 1000000;
        if (!ServletFileUpload.isMultipartContent(request)) {
            returnMap.put("error", "请选择文件！");
            return returnMap;
        }
        String dirName = request.getParameter("dir");  
        if (dirName == null) {  
            dirName = "image";  
        }  
        if (!extMap.containsKey(dirName)) {  
            returnMap.put("error", "目录名不正确!");
            return returnMap;
        }
        MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = mRequest.getFileMap();
         String fileName = null;
        try {
            for (Iterator<Map.Entry<String, MultipartFile>> it = fileMap.entrySet().iterator(); it.hasNext();) { 
                Map.Entry<String, MultipartFile> entry = it.next();  
                MultipartFile mFile = entry.getValue();  
                fileName = mFile.getOriginalFilename();  
                // 检查文件大小  
                if (mFile.getSize() > maxSize) {  
//                  return "上传文件大小超过限制!";
                }  
                String fileExt = fileName.substring(fileName.lastIndexOf(".")+1);  
                if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {  
//                  return "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式!";
                }

                //上传到ftp
                //上传文件名
                String newName = WpDate.getNo(2) +"."+ fileExt;
                //上传的路径
                String imagePath = dir+"/"+WpDate.dateToStrShort(new Date());
                String saveUrl = FTPUtil.uploadFile(imagePath,newName,mFile.getInputStream());

                System.out.println(saveUrl);
                returnMap.put("url", saveUrl);
                returnMap.put("error", 0);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return returnMap;
    }

}

---

4 下面是自定义的FTP上传工具类，用于处理具体的文件上传。

/**
 * FTP工具类
 * @Title: FTPUtil.java
 * @Description: FTP工具类
 * @date 2016-03-17 下午12:58:16
 * @version V1.0
 */
public class FTPUtil {
    private static final String FTP_IP = "***";//FTP连接地址
    private static final int FTP_PORT = 21;//FTP连接端口
    private static final String FTP_USERNAME = "***";//FTP用户名
    private static final String FTP_PASSWORD = "***..";//FT平密码
    private static final int FTP_CONNECTION_TIMEOUT = 60 * 1000;//FTP连接超时时间
    private static String separator=File.separator;
    private static final String FTP_BASEPATH = "/public/images/iec/";

    private static final String IMAGE_BASE_URL = "http://***/public/images/iec/";

    /**
     * Description: 向FTP服务器上传文件
     * @param filePath FTP服务器文件存放路径。例如分日期存放：/2015/01/01。文件的路径为basePath+filePath
     * @param filename 上传到FTP服务器上的文件名
     * @param input 输入流
     * @return 成功返回true，否则返回false
     */
    public static String uploadFile(String filePath, String filename, InputStream input) {
        String result = "";
        FTPClient ftp = new FTPClient();
        try {
            int reply;
            ftp.connect(FTP_IP, FTP_PORT);// 连接FTP服务器
            // 如果采用默认端口，可以使用ftp.connect(host)的方式直接连接FTP服务器
            ftp.login(FTP_USERNAME, FTP_PASSWORD);// 登录
            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();
                return result;
            }
            //切换到上传目录
            if (!ftp.changeWorkingDirectory(FTP_BASEPATH+filePath)) {
                //如果目录不存在创建目录
                String[] dirs = filePath.split("/");
                String tempPath = FTP_BASEPATH;
                for (String dir : dirs) {
                    if (null == dir || "".equals(dir)) continue;
                    tempPath += "/" + dir;
                    if (!ftp.changeWorkingDirectory(tempPath)) {
                        if (!ftp.makeDirectory(tempPath)) {
                            return result;
                        } else {
                            ftp.changeWorkingDirectory(tempPath);
                        }
                    }
                }
            }
            //设置上传文件的类型为二进制类型
            ftp.setFileType(FTP.BINARY_FILE_TYPE);
            //上传文件
            if (!ftp.storeFile(filename, input)) {
                return result;
            }
            input.close();
            ftp.logout();
            result = IMAGE_BASE_URL+filePath+"/"+filename;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return result;
    }

    private static String getSeparator(String path) {
        if(path.lastIndexOf(separator)==-1){
            if(separator.equals("/")){
                return "\\";
            }else{
                return "/";
            }
        }
        return separator;
    }
}

---

5 然后是前端页面，首先我们要初始化kindeditor的配置数据，将图片上传插件当初拿出来。

var TT = WP = {
    // 编辑器参数
    kingEditorParams : {
        //指定上传文件参数名称
        filePostName  : "uploadFile",
        //指定上传文件请求的url。
        uploadJson : '${pageContext.request.contextPath}/upload/saveImage',
        imageSizeLimit : '10MB', //批量上传图片单张最大容量
        imageUploadLimit : 3 ,//批量上传图片同时上传最多个数
        //上传类型，分别为image、flash、media、file
        dir : "vegoods"
    },
    init : function(data,picNum,dir,name){
        // 初始化图片上传组件
        this.initPicUpload(data,picNum,dir,name);
        this.initItemCat(data,type);
    },
    // 初始化图片上传组件
    initPicUpload : function(data,picNum,dir,name){
        $(".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({
                    //指定上传文件参数名称
                    filePostName  : "uploadFile",
                    //指定上传文件请求的url。
                    uploadJson : '${pageContext.request.contextPath}/upload/saveImage?dirs='+dir,
                    imageSizeLimit : '10MB', //批量上传图片单张最大容量
                    imageUploadLimit : picNum ,//批量上传图片同时上传最多个数
                    //上传类型，分别为image、flash、media、file
                    dir : dir
                }).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="+name+"]").val(imgArray.join(","));
                            form.find("[name=press]").hide();
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    },
    // 初始化选择类目组件
    initItemCat : function(data,type){
        $(".selectItemCat").each(function(i,e){
            var _ele = $(e);
            if(data && data.cid){
                _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
            }else{
                _ele.after("<span style='margin-left:10px;'></span>");
            }
            _ele.unbind('click').click(function(){
                var hid = document.getElementById("hospital_id");
                hid = hid==null?0:hid.value;
                $("<div>").css({padding:"5px"}).html("<ul>")
                        .window({
                            width:'500',
                            height:"450",
                            modal:true,
                            closed:true,
                            iconCls:'icon-save',
                            title:'选择类目',
                            onOpen : function(){
                                var _win = this;
                                $("ul",_win).tree({
                                    url:'${pageContext.request.contextPath}/goods/ecs_category/categoryList?hospital_id='+hid,
                                    animate:true,
                                    onClick : function(node){
                                        if($(this).tree("isLeaf",node.target)){
                                            // 填写到cid中
                                            _ele.parent().find("[name=cat_id]").val(node.id);
                                            _ele.next().text(node.text).attr("cat_id",node.id);
                                            document.getElementById("cat_name").style.display="none";
                                            $(_win).window('close');
                                            if (type ==1){
                                                getgoods("${pageContext.request.contextPath}/goods/ecs_goods/getcat_goods?cat_id="+node.id);
                                            }
                                            if(data && data.fun){
                                                data.fun.call(this,node);
                                            }
                                        }
                                    }
                                });
                            },
                            onClose : function(){
                                $(this).window("destroy");
                            }
                        }).window('open');
            });
        });
    },
    createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
    /**
     * 初始化单图片上传组件 <br/>
     * 选择器为：.onePicUpload <br/>
     * 上传完成后会设置input内容以及在input后面追加<img> 
     */
    initOnePicUpload : function(){
        $(".onePicUpload").click(function(){
            var _self = $(this);
            var dirname = _self.siblings("input").attr("name");
            KindEditor.editor({
                //指定上传文件参数名称
                filePostName  : "uploadFile",
                //指定上传文件请求的url。
                uploadJson : '${pageContext.request.contextPath}/upload/saveImage?dirs='+dirname,
                //上传类型，分别为image、flash、media、file
            }).loadPlugin('image', function() {
                this.plugin.imageDialog({
                    showRemote : false,
                    clickFn : function(url, title, width, height, border, align) {
                        var input = _self.siblings("input");
                        input.parent().find("img").remove();
                        input.val(url);
                        input.after("<br/><a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
                        this.hideDialog();
                    }
                });
            });
        });
    }
};

这里初始化了多图片上传以及单图片上传插件并在上传之后将数值填入指定的位置。

---

然后初始化kindeditor插件

var itemAddEditor ;
     $(function(){
         $("#save").on("click",function(){
             itemAddEditor.sync();
             validator.submitForm(false);
        });
     });
    //页面初始化完毕后执行此方法
    $(function(){
        //创建富文本编辑器
        itemAddEditor = WP.createEditor("#desc");
        //初始化类目选择和图片上传器
        TT.initOnePicUpload();
    });

最后不要忘了导入kindeditor的js

<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

这个是HTML代码

<a href="javascript:void(0)" class="easyui-linkbutton onePicUpload">图片上传</a>

---

6 然后要在服务器中搭建一个ftp服务器，配置nginx反向代理（PS都是在服务器端）。

---

下载一个nginx的windows版本，打开conf目录找到nginx.conf。如果端口号重复的话，修改端口号listen。

listen       9999;
        server_name  localhost;

重点是修改下面的root，就是你服务器上ftp的根目录。

location / {
            root   C:\jimingyang;
            index  index.html index.htm;
        }