Nginx怎么搭建图片服务器

这篇文章主要讲解了“Nginx怎么搭建图片服务器”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Nginx怎么搭建图片服务器”吧！

成都创新互联公司网站建设公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！专注中小微企业官网定制，成都网站设计、成都网站制作，塑造企业网络形象打造互联网企业效应。

效果图：

需求：实现图片的上传和批量上传

技术：nginx，vsftpd，spring，springmvc，kindeditor，centos

说明：本章节内容主要是实现图片的上传功能。使用 kindediter 是为了更好的演示图片的上传，回显，批量效果。后台代码与kindediter没有直接关系，放心阅读。另外源码中有mybatis的jar，不用理会，本章内容用不到，是为后续内容做准备！

源码：见文章底部

场景：用户将图片上传到 tomcat 服务器上，再由 tomcat 服务器通过ftp上传到 nginx 服务器上。

项目结构：

单元测试

首先要攻破核心技术。通过单元测试实现图片上传的功能。

package com.itdragon.test;

import java.io.file;
import java.io.fileinputstream;

import org.apache.commons.net.ftp.ftp;
import org.apache.commons.net.ftp.ftpclient;
import org.junit.test;

public class pictureftptest {

  // 测试 ftp 上传图片功能
  @test
  public void testftpclient() throws exception {
    // 1. 创建一个ftpclient对象
    ftpclient ftpclient = new ftpclient();
    // 2. 创建 ftp 连接
    ftpclient.connect("192.168.0.11", 21);
    // 3. 登录 ftp 服务器
    ftpclient.login("ftpuser", "root");
    // 4. 读取本地文件
    fileinputstream inputstream = new fileinputstream(new file("f:\\hello.png"));
    // 5. 设置上传的路径
    ftpclient.changeworkingdirectory("/usr/local/nginx/html/images");
    // 6. 修改上传文件的格式为二进制
    ftpclient.setfiletype(ftp.binary_file_type);
    // 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流
    ftpclient.storefile("hello.jpg", inputstream);
    // 8. 关闭连接
    ftpclient.logout();
    
  }
  
}

说明：这里的ip地址，端口，ftp用户名，密码，本地文件路径，以及nginx服务器图片路径等，这些字符串参数都要根据自己实际设置的来填写的。如果你的nginx和vsftpd安装是按照我提供的链接来做的。那你只需要改ip地址即可。

maven 的web 项目

搭建maven的web 项目，之前有写过。这里就不过多描述。

项目核心配置文件

首先是 maven 的核心文件 pom.xml

  4.0.0
  com.itdragon.upload
  pictrue-service
  0.0.1-snapshot
  war

  
  
    4.12
    4.1.3.release
    3.2.8
    1.2.2
    1.2.15
    5.1.6
    1.6.4
    2.4.2
    1.0.9
    4.3.5
    1.2
    2.5
    2.0
    2.5
    3.3.2
    1.3.2
    3.3
    3.4.2
    0.9.1
    1.3.1
    2.7.2
    4.10.3
  
  
    
    
      joda-time
      joda-time
      ${joda-time.version}
    
    
    
      org.apache.commons
      commons-lang3
      ${commons-lang3.version}
    
    
      org.apache.commons
      commons-io
      ${commons-io.version}
    
    
      commons-net
      commons-net
      ${commons-net.version}
    
    
    
      com.fasterxml.jackson.core
      jackson-databind
      ${jackson.version}
    
    
    
      org.apache.httpcomponents
      httpclient
      ${httpclient.version}
    
    
    
      junit
      junit
      ${junit.version}
      test
    
    
    
      org.slf4j
      slf4j-log4j12
      ${slf4j.version}
    
    
    
      org.mybatis
      mybatis
      ${mybatis.version}
    
    
      org.mybatis
      mybatis-spring
      ${mybatis.spring.version}
    
    
      com.github.miemiedev
      mybatis-paginator
      ${mybatis.paginator.version}
    
    
      com.github.pagehelper
      pagehelper
      ${pagehelper.version}
    
    
    
      mysql
      mysql-connector-java
      ${mysql.version}
    
    
    
      com.alibaba
      druid
      ${druid.version}
    
    
    
      org.springframework
      spring-context
      ${spring.version}
    
    
      org.springframework
      spring-beans
      ${spring.version}
    
    
      org.springframework
      spring-webmvc
      ${spring.version}
    
    
      org.springframework
      spring-jdbc
      ${spring.version}
    
    
      org.springframework
      spring-aspects
      ${spring.version}
    
    
    
      jstl
      jstl
      ${jstl.version}
    
    
      javax.servlet
      servlet-api
      ${servlet-api.version}
      provided
    
    
      javax.servlet
      jsp-api
      ${jsp-api.version}
      provided
    
    
    
      commons-fileupload
      commons-fileupload
      ${commons-fileupload.version}
    
    
    
      redis.clients
      jedis
      ${jedis.version}
    
    
    
      org.apache.solr
      solr-solrj
      ${solrj.version}
    
  

  
    ${project.artifactid}
    
      
      
        org.apache.maven.plugins
        maven-resources-plugin
        2.7
        
          utf-8
        
      
      
      
        org.apache.maven.plugins
        maven-compiler-plugin
        3.2
        
          1.7
          1.7
          utf-8
        
      
    
    
      
        
        
          org.apache.tomcat.maven
          tomcat7-maven-plugin
          2.2
        
      
    
  

说明：和文件上传有直接关系的是：

      commons-fileupload
      commons-fileupload
    

然后是 web 项目的核心文件 web.xml

  pictrue-service
  
  
    contextconfiglocation
    classpath:spring/applicationcontext-*.xml
  
  
    org.springframework.web.context.contextloaderlistener
  
  
  
    characterencodingfilter
    org.springframework.web.filter.characterencodingfilter
    
      encoding
      utf-8
    
  
  
    characterencodingfilter
    /*
  
  
  
    pictrue-service
    org.springframework.web.servlet.dispatcherservlet
    
      contextconfiglocation
      classpath:spring/springmvc.xml
    
    1
  
  
    pictrue-service
    /
  

再是 springmvc 配置文件 springmvc.xml，需要添加文件上传解析器

最后是 ftp 配置文件 resource.properties

ftp_address=192.168.0.11
ftp_port=21
ftp_username=ftpuser
ftp_password=root
ftp_base_path=/usr/local/nginx/html/images
image_base_url=http://192.168.0.11/images

service 层

上传图片的接口 pictureservice.java

package com.itdragon.service;
import java.util.map;
import org.springframework.web.multipart.multipartfile;
public interface pictureservice {

  /**
   * 上传，批量上传接口
   * @param uploadfile
   * @return
   */
  map uploadpicture(multipartfile uploadfile);
}

上传图片接口实现类 pictureserviceimpl.java

package com.itdragon.service.impl;

import java.io.ioexception;
import java.io.inputstream;
import java.util.hashmap;
import java.util.map;

import org.apache.commons.net.ftp.ftp;
import org.apache.commons.net.ftp.ftpclient;
import org.apache.commons.net.ftp.ftpreply;
import org.springframework.beans.factory.annotation.value;
import org.springframework.stereotype.service;
import org.springframework.web.multipart.multipartfile;

import com.itdragon.service.pictureservice;

@service
@suppresswarnings({"rawtypes", "unchecked"})
public class pictureserviceimpl implements pictureservice {
  
  // 通过 spring4 的 value注解，获取配置文件中的属性值
  @value("${ftp_address}")
  private string ftp_address;   // ftp 服务器ip地址
  @value("${ftp_port}")
  private integer ftp_port;    // ftp 服务器port，默认是21
  @value("${ftp_username}")
  private string ftp_username;  // ftp 服务器用户名
  @value("${ftp_password}")
  private string ftp_password;  // ftp 服务器密码
  @value("${ftp_base_path}")
  private string ftp_base_path;  // ftp 服务器存储图片的绝对路径
  @value("${image_base_url}")
  private string image_base_url; // ftp 服务器外网访问图片路径

  @override
  public map uploadpicture(multipartfile uploadfile) {
    map resultmap = new hashmap<>();
    try {
      // 1. 取原始文件名
      string oldname = uploadfile.getoriginalfilename();
      
      // 2. ftp 服务器的文件名
      string newname = oldname;
      //图片上传
      boolean result = uploadfile(ftp_address, ftp_port, ftp_username, ftp_password, 
          uploadfile.getinputstream(), ftp_base_path, newname);
      //返回结果
      if(!result) {
        resultmap.put("error", 1);
        resultmap.put("message", "upload fail");
        return resultmap;
      }
      resultmap.put("error", 0);
      resultmap.put("url", image_base_url + "/" + newname);
      return resultmap;
      
    } catch (exception e) {
      e.printstacktrace();
      resultmap.put("error", 1);
      resultmap.put("message", "upload fail");
      return resultmap;
    }
  }
  
  /**
   * ftp 上传图片方法
   * @param ip      ftp 服务器ip地址
   * @param port     ftp 服务器port，默认是21
   * @param account    ftp 服务器用户名
   * @param passwd    ftp 服务器密码
   * @param inputstream  文件流
   * @param workingdir  ftp 服务器存储图片的绝对路径
   * @param filename   上传到ftp 服务器文件名
   * @throws exception
   * 
   */
  public boolean uploadfile(string ip, integer port, string account, string passwd,
      inputstream inputstream, string workingdir, string filename) throws exception{
    boolean result = false;
    // 1. 创建一个ftpclient对象
    ftpclient ftpclient = new ftpclient();
    try {
      // 2. 创建 ftp 连接
      ftpclient.connect(ip, port);
      // 3. 登录 ftp 服务器
      ftpclient.login(account, passwd);
      int reply = ftpclient.getreplycode(); // 获取连接ftp 状态返回值
      system.out.println("code : " + reply);
      if (!ftpreply.ispositivecompletion(reply)) {
        ftpclient.disconnect(); // 如果返回状态不再 200 ~ 300 则认为连接失败
        return result;
      }
      // 4. 读取本地文件
//     fileinputstream inputstream = new fileinputstream(new file("f:\\hello.png"));
      // 5. 设置上传的路径
      ftpclient.changeworkingdirectory(workingdir);
      // 6. 修改上传文件的格式为二进制
      ftpclient.setfiletype(ftp.binary_file_type);
      // 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流
      if (!ftpclient.storefile(filename, inputstream)) {
        return result;
      }
      // 8. 关闭连接
      inputstream.close();
      ftpclient.logout();
      result = true;
    } catch (exception e) {
      e.printstacktrace();
    }finally {
      // fixme 听说，项目里面最好少用try catch 捕获异常，这样会导致spring的事务回滚出问题？？？难道之前写的代码都是假代码！！！
      if (ftpclient.isconnected()) {
        try {
          ftpclient.disconnect();
        } catch (ioexception ioe) {
        }
      }
    }
    return result;
  }

}

说明：

① @value 注解是spring4 中提供的，@value("${xxx}")

② 返回值是一个map，并且key有error，url，message。这是根据kindediter的语法要求来的。

controller 层

负责页面跳转的 pagecontroller.java

package com.itdragon.controller;

import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.pathvariable;
import org.springframework.web.bind.annotation.requestmapping;

@controller
public class pagecontroller {

  /**
   * 打开首页
   */
  @requestmapping("/")
  public string showindex() {
    return "index";
  }
  
  @requestmapping("/{page}")
  public string showpage(@pathvariable string page) {
    system.out.println("page : " + page);
    return page;
  }
}

负责图片上传的 picturecontroller.java

package com.itdragon.controller;

import java.util.map;

import org.springframework.beans.factory.annotation.autowired;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.requestparam;
import org.springframework.web.bind.annotation.restcontroller;
import org.springframework.web.multipart.multipartfile;

import com.fasterxml.jackson.core.jsonprocessingexception;
import com.fasterxml.jackson.databind.objectmapper;
import com.itdragon.service.pictureservice;

@restcontroller
public class picturecontroller {

  @autowired
  private pictureservice pictureservice;
  
  @requestmapping("pic/upload")
  public string pictureupload(@requestparam(value = "fileupload") multipartfile uploadfile) {
    string json = "";
    try {
      map result = pictureservice.uploadpicture(uploadfile);
      // 浏览器擅长处理json格式的字符串，为了减少因为浏览器内核不同导致的bug，建议用json
      json = new objectmapper().writevalueasstring(result);
    } catch (jsonprocessingexception e) {
      e.printstacktrace();
    }
    return json;
  }
}

说明：

① @restcontroller 也是spring4 提供的，是 @controller + @responsebody 的组合注解。

② controller层的返回值是一个json格式的字符串。是考虑到浏览器对json解析兼容性比较好。

views视图层

负责上传图片的jsp页面 pic-upload.jsp

<%@ page language="java" contenttype="text/html; utf-8" pageencoding="utf-8"%>






  
   
  
  
 
 
  
测试上传图片功能接口的form表单
  
    
    
  
  
  
借用kindeditor富文本编辑器实现批量上传图片
  
  
    $(function(){
      //初始化富文本编辑器
      kindeditor.create("#kindeditordesc", {
        // name值，必须和controller 的参数对应，不然会提示 400 的错误
        filepostname : "fileupload",
        // action值，
        uploadjson : '/pic/upload',
        // 设置上传类型，分别为image、flash、media、file
        dir : "image"
      });
    });
    

说明：pic-upload.jsp 分为两个部分，第一个部分是为了测试上传图片功能的form表单。第二个部分是为了更好的体验上传，批量上传，回显功能的kindediter 富文本编辑器。

感谢各位的阅读，以上就是“Nginx怎么搭建图片服务器”的内容了，经过本文的学习后，相信大家对Nginx怎么搭建图片服务器这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！