Vsftpd+Tengine+SpringMVC实现上传图片

第三部分：SpringMVC实现上传

1.1　思路

　　（1）使用SpringMVC上传组件，从页面表单接收图片

　　（2）使用vsftpd组件，将图片上传到Linux服务器

　　　　a.服务端：在Linux上安装ftp服务端vsftpd软件，并开启服务。

　　　　b.客户端：在java代码中使用FtpClient客户端建立与服务器的连接

　　（3）返回值：返回图片上传之后的访问路径

　　　　为什么？

　　　　因为保存图片到数据库的时候，保存的就是图片的访问路径

1.2　前端js实现

调用上传组件的初始化方法：

上传组件在common.js中定义：

上传组件的初始化方法init

1.3　后台java实现

　　1.3.1 代码结构

• Controller：从表单接收图片，返回图片的回调地址
• ·Service：创建FtpClient客户端，将图片直接上传到Linux服务器

　　1.3.2 请求响应格式

请求路径	/pic/upload
请求方式	Post
请求参数	uploadFile
返回值结构	参考Kindeditor官方文档(http://kindeditor.net/docs/upload.html)

Kindeditor官方文档要求的返回格式类型：

　　1.3.3 定义返回值类型

　　在ego-base工程中定义。

package cn.gz.base.vo;

/**
 * kindeditor文件上传返回值类型
 * @author Administrator
 *
 */
public class UploadResult {

    private int error;    //标识    1表示失败    0表示成功

    private String url;    //上传成功时，文件的访问地址

    private String message;    //上传失败时，错误信息

    public int getError() {
        return error;
    }

    public void setError(int error) {
        this.error = error;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public UploadResult() {
        super();
    }

}

　　1.3.4 在ego-manager工程中添加Springmvc上传组件及Pom依赖

　　1.修改spring-mvc.xml，添加上传组件

<!-- 配置springmvc上传组件
     上传组件的name必须为multipartResolver
-->
<bean name="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>

　　2.修改pom.xml，添加上传依赖common-fileupload.jar

<!-- 文件上传组件 -->
<dependency>
    <groupId>commons-net</groupId>
    <artifactId>commons-net</artifactId>
</dependency>

　　3.在ego-bse工程下创建FtpUtil.java类

package cn.gz.base.utils;

import java.io.InputStream;

import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;

public class FtpUtil {

    /**文件上传
     * @param host     ftp主机地址
     * @param port      端口
     * @param username  ftp用户名
     * @param password  ftp用户密码
     * @param basePath  基础路径   /home/ftpuser/ego/images
     * @param filePath  文件的路径，按日期区分  /2019/04/26
     * @param remoteFileName   上传之后，文件的名称
     * @param local     待上传文件的流对象
     * @return
     */
    public static boolean upload(String host,Integer port,String username,String password,
            String basePath,String filePath,String remoteFileName,InputStream local){

        //1、创建ftp客户端
        FTPClient client = new FTPClient();
        try {

            //2、连接服务端
            client.connect(host, port);

            //3、登陆，认证身份
            boolean flag = client.login(username, password);

            if(flag){

                /*
                 * 切换上传的目录。
                 *
                 * 如果这个目录不存在，则切换失败
                 */
                boolean flag2 = client.changeWorkingDirectory(basePath+filePath);
                if(!flag2){
                    /*
                     * 如果目录不存在，则创建目录
                     *
                     * 注意事项：如果有多级目录的时候，必须一层一层目录去创建
                     */
                    String tempPath = basePath;

                    String[] paths = filePath.split("/");

                    for (String path : paths) {
                        if(null!=path && !"".equals(path)){
                            tempPath = tempPath +"/"+path;

                            //创建当前目录   tempPath= /home/ftpuser/ego/images/2019/04/26
                            /*
                             * 切换到目录不成功，则说明该目录不存在，要创建这个目录
                             *
                             * 如果切换成功，则继续循环，创建下一层目录
                             */
                            if(!client.changeWorkingDirectory(tempPath)){

                                //如果创建成功，则切换到该目录
                                if(client.makeDirectory(tempPath)){
                                    if(!client.changeWorkingDirectory(tempPath)){
                                        return false;
                                    }

                                }else{
                                    return false;
                                }

                            }else{
                                continue;
                            }

                        }else{
                            continue;
                        }    

                    }
                }

                //5、指定上传为被动上传   因为：很多的客户端禁止主动模式
                client.enterLocalPassiveMode();

                //6、指定上传方式为二进制，即使用字节流
                client.setFileType(FTP.BINARY_FILE_TYPE);

                //7、上传
                boolean result = client.storeFile(remoteFileName, local);

                return result;

            }else{

                return flag;
            }

        } catch (Exception e) {
            e.printStackTrace();

            return false;

        } finally {

            try {
                if(client.logout()){
                    client.disconnect();
                }
            } catch (Exception e) {

                e.printStackTrace();
            }

        }
    }

}

　　4.将vsftpd服务端请求参数写到ego-manager工程里边的properties配置文件中

#配置ftp服务
FTP_HOST=192.xxx.xxx.24
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_BASE_URL=/home/ftpuser/ego/images

PIC_BASE_URL=http://192.xxx.xxx.24/images

　　1.3.5 Service层代码实现

　　创建UploadService接口及其实现类

package cn.gz.manager.service;

import org.springframework.web.multipart.MultipartFile;

import cn.gz.base.vo.UploadResult;

public interface UploadService {

    /**
     * 实现文件上传
     * @param file    接收从页面表单发送的文件
     * @return
     */
    UploadResult upload(MultipartFile file);
}

package cn.gz.manager.service.impl;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import cn.gz.base.utils.FtpUtil;
import cn.gz.base.vo.UploadResult;
import cn.gz.manager.service.UploadService;

@Service
public class UploadServiceImpl implements UploadService {

    /**
     * #配置ftp服务
FTP_HOST=192.168.232.24
FTP_PORT=21
FTP_USERNAME=ftpuser
FTP_PASSWORD=ftpuser
FTP_BASE_URL=/home/ftpuser/ego/images

PIC_BASE_URL=http://192.168.232.24/images
     */
    @Value("${FTP_HOST}")
    private String FTP_HOST;
    @Value("${FTP_PORT}")
    private Integer FTP_PORT;
    @Value("${FTP_USERNAME}")
    private String FTP_USERNAME;
    @Value("${FTP_PASSWORD}")
    private String FTP_PASSWORD;
    @Value("${FTP_BASE_URL}")
    private String FTP_BASE_URL;
    @Value("${PIC_BASE_URL}")
    private String PIC_BASE_URL;

    @Override
    public UploadResult upload(MultipartFile file) {

        UploadResult result = new UploadResult();

        try {
            //上传需求按日期划分图片的目录         /2019/04/26/1.jpg
            String filePath ="/"+ new SimpleDateFormat("yyyy").format(new Date())
                    +"/" + new SimpleDateFormat("MM").format(new Date())
                    +"/" + new SimpleDateFormat("dd").format(new Date());

            //获取文件的后缀，即格式
            String originalFilename = file.getOriginalFilename();
            //.jpg
            String fileType = originalFilename.substring(originalFilename.lastIndexOf("."));
            String remoteFileName = System.currentTimeMillis()+fileType;  //111.jpg

            boolean upload = FtpUtil.upload(FTP_HOST, FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_URL, filePath, remoteFileName, file.getInputStream());

            if(upload){
                result.setError(0);
                result.setUrl(PIC_BASE_URL+filePath+"/"+remoteFileName);
            }else{
                result.setError(1);
                result.setMessage("上传失败");
            }
         } catch (Exception e) {
            result.setError(1);
            result.setMessage(e.getMessage());
        }
        return result;
    }

}

　　1.3.6 Controller层代码实现

　　创建UploadController类

package cn.gz.manager.controller;

import org.springframework.beans.factory.annotation.Autowired;
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 cn.gz.base.vo.UploadResult;
import cn.gz.manager.service.UploadService;

@Controller
public class UploadController {

    @Autowired
    private UploadService uploadService;

    @RequestMapping("/pic/upload")
    @ResponseBody
    public UploadResult upload(MultipartFile uploadFile){

        UploadResult result = uploadService.upload(uploadFile);
        return result;
    }
}

　　1.3.7 测试结果，上传成功

1.4　将上传结果保存到页面表单域

页面效果