Nginx+Ftp+Fileinput做圖片上傳顯示服務器（三）

這是Nginx+Ftp+Fileinput做圖片上傳顯示服務器的最後一篇，結合之前的SSM框架開始做上傳顯示。之前的SSM搭建的簡易登錄系統http://blog.csdn.net/a1369508468/article/details/63253599
之前忘了貼出數據庫字段，就在這裏一併貼出：

一、JSP頁面編寫

fileinput上傳組件下載：http://download.csdn.net/download/shunyadu/8539737
上傳頁面編寫代碼:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>上傳圖片</title>
        <link href="/SSM/resource/css/bootstrap.min.css" rel="stylesheet">
        <link href="/SSM/resource/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="/SSM/resource/js/jquery-2.0.3.min.js"></script>
        <script src="/SSM/resource/js/fileinput.js" type="text/javascript"></script>
        <script type="text/javascript" src="/SSM/resource/js/fileinput_locale_zh.js"></script>
        <script src="/SSM/resource/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container kv-main">

            <br>
            <form enctype="multipart/form-data">

                <div class="form-group">
                    <input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
                </div>

            </form>
        </div>
        <div align="center">
            <input type="button" name="clickBtn" class="btn btn-primary" id="clickBtn" value="點擊查看上傳的圖片" />
        </div>
    </body>
    <script>

    $("#file-1").fileinput({
        uploadUrl: '/SSM/user/ftpUpload', //上傳地址
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        minFilesNum:1,
    }).on("fileuploaded",function(event,data){
        if(data.response.status == 200){
            alert(data.response.message);
            return;
        }else{
            alert(data.response.message);
        }
    });
    $(function(){
        $("#clickBtn").click(function(){
            window.location.href="/SSM/user/showImages";
        });
    });
    </script>
</html>

顯示頁面編寫：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>用戶上傳的圖片</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" href="/SSM/resource/css/bootstrap.min.css" type="text/css"></link>
    <script type="text/javascript" src="/SSM/resource/js/bootstrap.min.js"></script>
  </head> 
  <body>
   <c:choose>
        <c:when test="${empty imageList }">
            <span style="text-align:center;color:#666;font-size:25px;">未檢測到圖片</span>
        </c:when>
        <c:otherwise>
            <c:forEach items="${imageList }" var="item">
                <img src="http://192.168.127.128/${item.imageUrl }" class="img-rounded" width="400px" height="300px" style="float:left;padding-left:10px;padding-top:10px;">
            </c:forEach>
        </c:otherwise>
   </c:choose>
  </body>
</html>

二、JAVA代碼編寫(代碼的增加和修改都是基於之前寫的搭建SSM環境上)

新增jar包：

commons-net-1.4.1.jar
commons-fileupload-1.2.1.jar

SpringMVC增加文件上傳解析

<bean id="multipartResolver"    
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
        <!-- 設置默認編碼 -->  
        <property name="defaultEncoding" value="utf-8" />    
        <!-- 設置文件大小的最大值 -->  
        <property name="maxUploadSize" value="10485760000" />     
    </bean>

Domain層代碼：
新增UserImage實體

package com.xw.demo.domain;

import java.io.Serializable;

public class UserImage implements Serializable {

    private static final long serialVersionUID = -8583470494455131191L;

    //ID
    private Integer id;
    //圖片鏈接
    private String imageUrl;
    //用戶id
    private Integer userId;

    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getImageUrl() {
        return imageUrl;
    }
    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }
    public Integer getUserId() {
        return userId;
    }
    public void setUserId(Integer userId) {
        this.userId = userId;
    }

}

Mapper層代碼：
新增UserImageMapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper  
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
<!-- 映射對應的接口路徑 -->
<mapper namespace="com.xw.demo.dao.UserImageDao">
    <resultMap type="com.xw.demo.domain.UserImage" id="UserImageMap">
        <id column="id" property="id" />
        <result column="imageUrl" property="imageUrl" />
        <result column="userId" property="userId" />
    </resultMap>
    <!-- 根據用戶ID查詢的方法 -->
    <select id="selectById" resultMap="UserImageMap" >
        SELECT * FROM TB_USER_IMAGE WHERE USERID = #{id};
    </select>
    <!-- 新增方法 -->
    <insert id="insertUserImage">
        INSERT INTO TB_USER_IMAGE (IMAGEURL,USERID) values (#{imageUrl},#{userId});
    </insert>
</mapper>

Dao層代碼：
新增UserImageDao

package com.xw.demo.dao;

import java.util.List;

import com.xw.demo.domain.UserImage;

public interface UserImageDao {
    /**
     * 插入數據
     * @param userImage
     * @return 受影響的行數
     */
    public int insertUserImage(UserImage userImage);

    /**
     * 根據ID查詢數據
     * @param id
     * @return List<UserImage> 查詢的集合
     */
    public List<UserImage> selectById(int id);
}

Service層代碼：
新增UserImageService和UserImageServiceImpl
UserImageService：

package com.xw.demo.service;

import java.util.List;

import com.xw.demo.domain.UserImage;

public interface UserImageService {
    /**
     * 插入數據
     * @param userImage
     * @return 受影響的行數
     */
    public int insertUserImage(UserImage userImage);

    /**
     * 根據ID查詢數據
     * @param id
     * @return List<UserImage> 查詢的集合
     */
    public List<UserImage> selectById(int id);
}

UserImageServiceImpl

package com.xw.demo.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.xw.demo.dao.UserImageDao;
import com.xw.demo.domain.UserImage;
import com.xw.demo.service.UserImageService;

@Service("userImageService")
public class UserImageServiceImpl implements UserImageService {

    @Resource
    private UserImageDao userImageDao;
    /**
     * 插入數據
     * @param userImage
     * @return row 受影響的行數
     */
    public int insertUserImage(UserImage userImage) {
        int row = userImageDao.insertUserImage(userImage);
        return row;
    }

    public List<UserImage> selectById(int id) {
        List<UserImage> list = userImageDao.selectById(id);
        return list!=null && list.size()>0?list:null;
    }

}

UserController層代碼：

package com.xw.demo.controller;

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.annotation.Resource;
import javax.servlet.http.HttpSession;

import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


import com.xw.demo.domain.User;
import com.xw.demo.domain.UserImage;
import com.xw.demo.service.UserImageService;
import com.xw.demo.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;
    @Resource
    private UserImageService userImageService;

    private final static String LOGIN_PAGE = "/login";
    private final static String USER_UPLOAD = "/upload";
    private final static String SHOW_IMAGES = "/showImages";

    //跳轉到登錄頁面
    @RequestMapping(value = "/login",method = RequestMethod.GET)
    public String tologin(){
        return LOGIN_PAGE;
    }

    //跳轉到上傳頁面
    @RequestMapping(value = "/upload",method = RequestMethod.GET)
    public String toUpload(HttpSession session){
        //取出Session驗證
        User user = (User) session.getAttribute("loginUser");
        if(user == null || "".equals(user)){
            return LOGIN_PAGE;
        }
        return USER_UPLOAD;
    }

    //登錄驗證
    @RequestMapping(value = "/loginCheck", method = RequestMethod.POST)
    @ResponseBody
    public Map<Object,String> login(String username,String password,HttpSession session){
        Map<Object,String> map = new HashMap<Object, String>();
        User user = userService.selectByUsername(username);
        if(user != null && user.getPassword().equals(password)){
            //登錄成功後存儲Session
            session.setAttribute("loginUser", user);
            map.put("status", "200");
            map.put("message", "登陸成功!");
        }else{
            map.put("status", "300");
            map.put("message", "用戶名或者密碼錯誤!");
        }
        return map;
    }

    //上傳
    @RequestMapping(value = "/ftpUpload",method = RequestMethod.POST)
    @ResponseBody
    public Map<Object,String> upload(String userid,MultipartFile file,HttpSession session) throws Exception{
        final Map<Object,String> map = new HashMap<Object, String>();
        //取出Session驗證
        User user = (User) session.getAttribute("loginUser");
        if(user == null && "".equals(user)){
            map.put("status", "300");
            map.put("message", "爲檢測到登錄信息!");
            return map;
        }else{
            FTPClient ftp = new FTPClient();
            int reply;//用來接收響應碼
            String hostname = "192.168.127.128";//ftp的IP地址
            String username = "test"; //ftp用戶名
            String password = "test";//ftp密碼
            int port = 21;//端口
            ftp.connect(hostname, port);
            ftp.login(username, password);
            reply = ftp.getReplyCode();
            //System.out.println("響應碼："+reply);
            if(!(FTPReply.isPositiveCompletion(reply))){
                map.put("message", "FTP連接錯誤");
                return map;
            }
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
            //取當前日期作爲文件夾
            String dateFile = sdf.format(new Date());
            //System.out.println("格式化後的date:"+dateFile);
            //生成隨機文件名
            String fileName = UUID.randomUUID()+".jpg";
            //System.out.println("文件名:"+fileName);
            //拼接上傳的路徑
            String uploadPath = "uploadImage/"+dateFile+"/"+fileName;
            //System.out.println("上傳的路徑:"+uploadPath);
            //創建文件夾 必須一層一層創建
            ftp.makeDirectory("uploadImage");
            ftp.makeDirectory("uploadImage"+"/"+dateFile);
            if(!(ftp.changeWorkingDirectory(uploadPath))){
                ftp.setFileType(FTPClient.BINARY_FILE_TYPE);
                if(ftp.storeFile(uploadPath, file.getInputStream())){
                    //上傳成功將數據存到數據庫
                    UserImage userImage = new UserImage();
                    userImage.setImageUrl(uploadPath);
                    userImage.setUserId(user.getId());
                    int row = userImageService.insertUserImage(userImage);
                    if(row > 0){
                        map.put("status", "200");
                        map.put("message", "上傳成功!");
                        //System.out.println("上傳成功!");
                    }else{
                        map.put("status", "300");
                        map.put("message", "上傳失敗!");
                        //System.out.println("上傳失敗");
                    }
                }else{
                    map.put("status", "300");
                    map.put("message", "上傳失敗!");
                    //System.out.println("上傳失敗");
                }
                file.getInputStream().close();
                ftp.logout();
            }
        }
        return map;
    }

    //跳轉到圖片顯示頁
    @RequestMapping(method = RequestMethod.GET,value = "/showImages")
    public String showImages(HttpSession session,ModelMap map) throws Exception{
        User user = (User) session.getAttribute("loginUser");
        if(user == null || "".equals(user)){
            return LOGIN_PAGE;
        }
        List<UserImage> imageList = userImageService.selectById(user.getId());
        if(imageList != null && imageList.size() >0){
            System.out.println(imageList.size());
            map.put("imageList", imageList);
        }
        return SHOW_IMAGES;
    }
}

三、測試上傳：

上傳頁面：

上傳成功：

數據庫存儲路徑：

四、顯示頁面

Nginx的設置：
修改nginx.conf文件：

沒有上傳圖片時顯示：

上傳後有圖顯示：

圖片地址：

圖片上傳和顯示的到這裏就寫完了，由於比較忙所以拖了很久才寫完。雖然是第二次寫，但在配置nginx，ftp和ssm時還是遇到一些之前沒有遇到的問題，好在有萬能的百度和谷歌可以看到許多大牛是怎麼解決的。每一個錯誤都算是一次經驗的積累。由於剛剛接觸博客，所以寫的也不怎麼詳細，代碼優化可能也不夠好，若有錯誤以及哪些地方做的不好需要優化還請各位大牛及時指出。

Nginx+Ftp+Fileinput做圖片上傳顯示服務器（三）

一、JSP頁面編寫

二、JAVA代碼編寫(代碼的增加和修改都是基於之前寫的搭建SSM環境上)

三、測試上傳：

四、顯示頁面

Android啓動過程-萬字長文(Android14)

【SQL進階】CASE語句的使用

optional install error: Error: Unsupported URL Type: npm:vue-loader@^16.1.0

這種嵌套字典類型的數據，我想把它讀取到df裏，如何操作？

微調真的能讓LLM學到新東西嗎:引入新知識可能讓模型產生更多的幻覺

iNeuOS工業互聯網操作系統，增加電力IEC104協議

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

chromedriver版本

kbgressdb之數據結構V0.2

關於JavaScript繼承的幾種方法

微信小程序自定義搜索導航欄

使用Scrapy爬取掘金熱門文章的分析和實現

Next+React+Antd-mobile的簡單搭建使用

極簡的兩種雙向綁定的實現

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結