Nginx 搭建图片服务器

秒速五厘米 2021-07-31 13:20 665阅读 0赞

点击上方 蓝色字体 ，选择“标星公众号”

优质文章，第一时间送达

640?wx\_fmt=jpeg

来自 | ITDragon龙

链接 | cnblogs.com/itdragon/p/7864916.html

本章内容通过Nginx 和 FTP 搭建图片服务器。在学习本章内容前，请确保您的Linux 系统已经安装了Nginx 和 Vsftpd。

Nginx 安装

http://www.cnblogs.com/itdragon/p/7850985.html

Vsftpd 安装

http://www.cnblogs.com/itdragon/p/7857649.html

本章知识点

效果图：

640?wx\_fmt=gif

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

技术：Nginx，Vsftpd，Spring，SpringMVC，KindEditor，CentOS

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

源码：见文章底部

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

640?wx\_fmt=png

项目结构：

640?wx\_fmt=png

单元测试

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

  1. public class PictureFTPTest {    
  4.     // 测试 ftp 上传图片功能    
  5.     @Test    
  6.     public void testFtpClient() throws Exception {    
  7.         // 1. 创建一个FtpClient对象    
  8.         FTPClient ftpClient = new FTPClient();    
  9.         // 2. 创建 ftp 连接    
  10.         ftpClient.connect("192.168.0.11", 21);    
  11.         // 3. 登录 ftp 服务器    
  12.         ftpClient.login("ftpuser", "root");    
  13.         // 4. 读取本地文件    
  14.         FileInputStream inputStream = new FileInputStream(new File("F:\\hello.png"));    
  15.         // 5. 设置上传的路径    
  16.         ftpClient.changeWorkingDirectory("/usr/local/nginx/html/images");    
  17.         // 6. 修改上传文件的格式为二进制    
  18.         ftpClient.setFileType(FTP.BINARY_FILE_TYPE);    
  19.         // 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流    
  20.         ftpClient.storeFile("hello.jpg", inputStream);    
  21.         // 8. 关闭连接    
  22.         ftpClient.logout();    
  25.     }    
  28. }

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

Maven 的Web 项目

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

项目核心配置文件

首先是 Maven 的核心文件 pom.xml，添加下列对应版本的依赖即可，可前去https://mvnrepository.com/tags/maven 查找依赖。

  1. <junit.version>4.12</junit.version>    
  2.   <spring.version>4.1.3.RELEASE</spring.version>    
  3.   <mybatis.version>3.2.8</mybatis.version>    
  4.   <mybatis.spring.version>1.2.2</mybatis.spring.version>    
  5.   <mybatis.paginator.version>1.2.15</mybatis.paginator.version>    
  6.   <mysql.version>5.1.6</mysql.version>    
  7.   <slf4j.version>1.6.4</slf4j.version>    
  8.   <jackson.version>2.4.2</jackson.version>    
  9.   <druid.version>1.0.9</druid.version>    
  10.   <httpclient.version>4.3.5</httpclient.version>    
  11.   <jstl.version>1.2</jstl.version>    
  12.   <servlet-api.version>2.5</servlet-api.version>    
  13.   <jsp-api.version>2.0</jsp-api.version>    
  14.   <joda-time.version>2.5</joda-time.version>    
  15.   <commons-lang3.version>3.3.2</commons-lang3.version>    
  16.   <commons-io.version>1.3.2</commons-io.version>    
  17.   <commons-net.version>3.3</commons-net.version>    
  18.   <pagehelper.version>3.4.2</pagehelper.version>    
  19.   <jsqlparser.version>0.9.1</jsqlparser.version>    
  20.   <commons-fileupload.version>1.3.1</commons-fileupload.version>    
  21.   <jedis.version>2.7.2</jedis.version>    
  22.   <solrj.version>4.10.3</solrj.version>

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

  1. <dependency>    
  2.      <groupId>commons-fileupload</groupId>    
  3.      <artifactId>commons-fileupload</artifactId>    
  4. </dependency>

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

  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
  3.     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"    
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"    
  5.     id="taotao" version="2.5">    
  6.     <display-name>pictrue-service</display-name>    
  7.     <!-- 加载spring容器 -->    
  8.     <context-param>    
  9.         <param-name>contextConfigLocation</param-name>    
  10.         <param-value>classpath:spring/applicationContext-*.xml</param-value>    
  11.     </context-param>    
  12.     <listener>    
  13.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>    
  14.     </listener>    
  15.     <!-- 解决post乱码 -->    
  16.     <filter>    
  17.         <filter-name>CharacterEncodingFilter</filter-name>    
  18.         <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>    
  19.         <init-param>    
  20.             <param-name>encoding</param-name>    
  21.             <param-value>utf-8</param-value>    
  22.         </init-param>    
  23.     </filter>    
  24.     <filter-mapping>    
  25.         <filter-name>CharacterEncodingFilter</filter-name>    
  26.         <url-pattern>/*</url-pattern>    
  27.     </filter-mapping>    
  28.     <!-- springmvc的前端控制器 -->    
  29.     <servlet>    
  30.         <servlet-name>pictrue-service</servlet-name>    
  31.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>    
  32.         <init-param>    
  33.             <param-name>contextConfigLocation</param-name>    
  34.             <param-value>classpath:spring/springmvc.xml</param-value>    
  35.         </init-param>    
  36.         <load-on-startup>1</load-on-startup>    
  37.     </servlet>    
  38.     <servlet-mapping>    
  39.         <servlet-name>pictrue-service</servlet-name>    
  40.         <url-pattern>/</url-pattern>    
  41.     </servlet-mapping>    
  42. </web-app>

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

  1. <!-- 定义文件上传解析器 -->    
  2.     <bean id="multipartResolver"    
  3.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
  4.         <!-- 设定默认编码 -->    
  5.         <property name="defaultEncoding" value="UTF-8"></property>    
  6.         <!-- 设定文件上传的最大值5MB，5*1024*1024 -->    
  7.         <property name="maxUploadSize" value="5242880"></property>    
  8.     </bean>

最后是 Ftp 配置文件 resource.properties

  1. FTP_ADDRESS=192.168.0.11    
  2. FTP_PORT=21    
  3. FTP_USERNAME=ftpuser    
  4. FTP_PASSWORD=root    
  5. FTP_BASE_PATH=/usr/local/nginx/html/images    
  6. IMAGE_BASE_URL=http://192.168.0.11/images

Service 层

上传图片的接口 PictureService.java

  1. /**    
  2.      * 上传，批量上传接口    
  3.      * @param uploadFile    
  4.      * @return    
  5.      */    
  6.     Map uploadPicture(MultipartFile uploadFile);    
  7. }

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

  1. @Service    
  2. @SuppressWarnings({"rawtypes", "unchecked"})    
  3. public class PictureServiceImpl implements PictureService {    
  6.     // 通过 Spring4 的 Value注解，获取配置文件中的属性值    
  7.     @Value("${FTP_ADDRESS}")    
  8.     private String FTP_ADDRESS;     // ftp 服务器ip地址    
  9.     @Value("${FTP_PORT}")    
  10.     private Integer FTP_PORT;       // ftp 服务器port，默认是21    
  11.     @Value("${FTP_USERNAME}")    
  12.     private String FTP_USERNAME;    // ftp 服务器用户名    
  13.     @Value("${FTP_PASSWORD}")    
  14.     private String FTP_PASSWORD;    // ftp 服务器密码    
  15.     @Value("${FTP_BASE_PATH}")    
  16.     private String FTP_BASE_PATH;   // ftp 服务器存储图片的绝对路径    
  17.     @Value("${IMAGE_BASE_URL}")    
  18.     private String IMAGE_BASE_URL;  // ftp 服务器外网访问图片路径    
  21.     @Override    
  22.     public Map uploadPicture(MultipartFile uploadFile) {    
  23.         Map resultMap = new HashMap<>();    
  24.         try {    
  25.             // 1. 取原始文件名    
  26.             String oldName = uploadFile.getOriginalFilename();    
  29.             // 2. ftp 服务器的文件名    
  30.             String newName = oldName;    
  31.             //图片上传    
  32.             boolean result = uploadFile(FTP_ADDRESS, FTP_PORT, FTP_USERNAME, FTP_PASSWORD,     
  33.                     uploadFile.getInputStream(), FTP_BASE_PATH, newName);    
  34.             //返回结果    
  35.             if(!result) {    
  36.                 resultMap.put("error", 1);    
  37.                 resultMap.put("message", "upload Fail");    
  38.                 return resultMap;    
  39.             }    
  40.             resultMap.put("error", 0);    
  41.             resultMap.put("url", IMAGE_BASE_URL + "/" + newName);    
  42.             return resultMap;    
  45.         } catch (Exception e) {    
  46.             e.printStackTrace();    
  47.             resultMap.put("error", 1);    
  48.             resultMap.put("message", "upload Fail");    
  49.             return resultMap;    
  50.         }    
  51.     }    
  54.     /**    
  55.      * ftp 上传图片方法    
  56.      * @param ip            ftp 服务器ip地址    
  57.      * @param port          ftp 服务器port，默认是21    
  58.      * @param account       ftp 服务器用户名    
  59.      * @param passwd        ftp 服务器密码    
  60.      * @param inputStream   文件流    
  61.      * @param workingDir    ftp 服务器存储图片的绝对路径    
  62.      * @param fileName      上传到ftp 服务器文件名    
  63.      * @throws Exception    
  64.      *     
  65.      */    
  66.     public boolean uploadFile(String ip, Integer port, String account, String passwd,    
  67.             InputStream inputStream, String workingDir, String fileName) throws Exception{    
  68.         boolean result = false;    
  69.         // 1. 创建一个FtpClient对象    
  70.         FTPClient ftpClient = new FTPClient();    
  71.         try {    
  72.             // 2. 创建 ftp 连接    
  73.             ftpClient.connect(ip, port);    
  74.             // 3. 登录 ftp 服务器    
  75.             ftpClient.login(account, passwd);    
  76.             int reply = ftpClient.getReplyCode(); // 获取连接ftp 状态返回值    
  77.             System.out.println("code : " + reply);    
  78.             if (!FTPReply.isPositiveCompletion(reply)) {    
  79.                 ftpClient.disconnect(); // 如果返回状态不再 200 ~ 300 则认为连接失败    
  80.                 return result;    
  81.             }    
  82.             // 4. 读取本地文件    
  83. //          FileInputStream inputStream = new FileInputStream(new File("F:\\hello.png"));    
  84.             // 5. 设置上传的路径    
  85.             ftpClient.changeWorkingDirectory(workingDir);    
  86.             // 6. 修改上传文件的格式为二进制    
  87.             ftpClient.setFileType(FTP.BINARY_FILE_TYPE);    
  88.             // 7. 服务器存储文件，第一个参数是存储在服务器的文件名，第二个参数是文件流    
  89.             if (!ftpClient.storeFile(fileName, inputStream)) {    
  90.                 return result;    
  91.             }    
  92.             // 8. 关闭连接    
  93.             inputStream.close();    
  94.             ftpClient.logout();    
  95.             result = true;    
  96.         } catch (Exception e) {    
  97.             e.printStackTrace();    
  98.         }finally {    
  99.             // FIXME 听说，项目里面最好少用try catch 捕获异常，这样会导致Spring的事务回滚出问题？？？难道之前写的代码都是假代码！！！    
  100.             if (ftpClient.isConnected()) {    
  101.                 try {    
  102.                     ftpClient.disconnect();    
  103.                 } catch (IOException ioe) {    
  104.                 }    
  105.             }    
  106.         }    
  107.         return result;    
  108.     }    
  109. }

说明：

  • @Value 注解是Spring4 中提供的，@Value(“${XXX}“)
  • 返回值是一个Map，并且key有error，url，message。这是根据KindEditer的语法要求来的。详情见链接。http://kindeditor.net/docs/upload.html

Controller 层

负责页面跳转的 PageController.java

  1. @Controller    
  2. public class PageController {    
  5.     /**    
  6.      * 打开首页    
  7.      */    
  8.     @RequestMapping("/")    
  9.     public String showIndex() {    
  10.         return "index";    
  11.     }    
  14.     @RequestMapping("/{page}")    
  15.     public String showpage(@PathVariable String page) {    
  16.         System.out.println("page : " + page);    
  17.         return page;    
  18.     }    
  19. }

负责图片上传的 PictureController.java

  1. @RestController    
  2. public class PictureController {    
  5.     @Autowired    
  6.     private PictureService pictureService;    
  9.     @RequestMapping("pic/upload")    
  10.     public String pictureUpload(@RequestParam(value = "fileUpload") MultipartFile uploadFile) {    
  11.         String json = "";    
  12.         try {    
  13.             Map result = pictureService.uploadPicture(uploadFile);    
  14.             // 浏览器擅长处理json格式的字符串，为了减少因为浏览器内核不同导致的bug，建议用json    
  15.             json = new ObjectMapper().writeValueAsString(result);    
  16.         } catch (JsonProcessingException e) {    
  17.             e.printStackTrace();    
  18.         }    
  19.         return json;    
  20.     }    
  21. }

说明：

  • @RestController 也是Spring4 提供的，是 @Controller + @ResponseBody 的组合注解。
  • Controller层的返回值是一个json格式的字符串。是考虑到浏览器对json解析兼容性比较好。

Views视图层

负责上传图片的视图页面：

  1. <form action="pic/upload" method="post" enctype="multipart/form-data">    
  2.         <input type="file" name="fileUpload" />    
  3.         <input type="submit" value="上传文件" />    
  4.     </form>    
  5.     <hr />    
  6.     <h3>借用KindEditor富文本编辑器实现批量上传图片</h3>    
  7.     <textarea id="kindEditorDesc" ></textarea>    
  8.     <script type="text/javascript">    
  9.         $(function(){    
  10.             //初始化富文本编辑器    
  11.             KindEditor.create("#kindEditorDesc", {    
  12.                 // name值，必须和Controller 的参数对应，不然会提示 400 的错误    
  13.                 filePostName : "fileUpload",    
  14.                 // action值，    
  15.                 uploadJson : '/pic/upload',    
  16.                 // 设置上传类型，分别为image、flash、media、file    
  17.                 dir : "image"    
  18.             });    
  19.         });    
  20. </script>

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

总结

  • Nginx 搭建服务器的思维
  • Java实现 Ftp上传图片的功能
  • KindEditer 上传图片的功能

源码：https://github.com/ITDragonBlog/daydayup/tree/master/Nginx

Nginx 搭建图片服务器到这里就结束了，有什么不足的地方，请赐教。如果觉得不错，可以点个赞哦！

如果喜欢本篇文章，欢迎 转发、点赞 。关注订阅号「Web项目聚集地」，回复「全栈」即可获取 2019 年最新 Java、Python、前端学习视频资源。

推荐阅读

1.

2.

3.

4.

5.

6.

640?wx\_fmt=jpeg

喜欢文章，点个 **在看** 640?wx\_fmt=jpeg

发表评论

表情：
评论列表 （有 0 条评论，665人围观）

还没有评论，来说两句吧...

相关阅读

    相关 nginx搭建图片服务器

    1.场景还原     近日，一直忙着搭建公司后台架构，今天得空将图片服务器的搭建理理思路，希望对大家有所帮助。之前笔者将ftp上传的图片路径在tomcat中配置了一把，也

    迷南。迷南。/ 0 赞/ 419 阅读