猿实战04——el-upload结合nginx之通用图片处理
猿实战04——el-upload结合nginx之通用图片处理
在上一章节品牌管理的设计和实现中。你一定会遇到一个小麻烦——文件上传。文件上传，其实是一个老生常谈的话题，在之前的文章中，猿人君也多次提及。在上一章节中，细心的你或许会发现一个标签，el-upload。没错，它就是Element组件库提供的一个upload组件，今天我们就来结合它讲一讲如何封装一个通用的文件上传工具，供我们的电商系统使用。
前端篇之el-upload
我们可以通过上传品牌来看一下el-upload的基本用法。
action:执行上传动作的后端接口。
上传文件数量：首先el-upload提供了multiple属性用于设置是否可以同时选中多个文件上传，这个也是<input type='file'>的属性，默认为true。另外el-upload组件提供了:limit属性来设置最多可以上传的文件数量，超出此数量后选择的文件是不会被上传的。:on-exceed绑定的方法则是处理超出数量后的动作。
上传格式及大小限制: 如果需要限制上传文件的格式，需要添加accept属性,accept属性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等。
注意噢，accept只是选择文件时限制格式，其实用户还是可以点选“所有文件”选项，上传其他格式。如果需要在在上传时再次校验，择需要在:before-upload这个钩子绑定相应的方法来校验，代码如下：
这样，不光是文件类型，对文件大小也做了限制。
headers:上传文件的请求头，很多时候前后端分离的项目会在请求头里做一些文章，比如token信息这类的。
data:上传文件时附带的参数信息，比如你想在上传文件时附带一些其它参数信息时，就可以用到了。
file-list: el-upload的功能可以说很强大了，可以很清晰的显示已上传的文件列表，并且可以方便的删除，以便上传新的文件。这里指定的参数“imgList”，就是文件绑定一个数组，后续的一些操作都跟它有关系。
一些其它的属性和钩子函数，就搬运官网了，大家可以看一看。
前端篇之后端处理
前端上传的文件，后端自然是需要对文件进行读取和存储的。在这里，我们使用Spring MVC提供的文件上传方式，经过简单封装，来进行统一处理,在之前的框架搭建篇我们已经做过配置了。
这里只是做了一个简单配置，更多的细节，我们可以后续完善配置，现在我们要想一下怎样封装才能让文件上传相对通用一点呢？
首先文件上传之后需要有地方存储吧？还记得之前我们提到过的文件服务器吗？把图片什么的交给专用的web server来处理，自然比tomcat这类的应用服务器要好很多吧？那这个web服务器总有路径吧？还有，我们可以可能想分门别类的存放文件，那么，能不能通过文件架的方式来处理呢？
基于以上的考虑，在不考虑分布式文件系统的情况下，我们很快就有了答案。
package com.pz.basic.mall.controller.upload;
import com.pz.basic.mall.domain.base.Result;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
@RestController
@RequestMapping("/upload")
public class UploadController {
@Value("${FILE_Upload_Path}")
private String file_upload_Path;//上传文件存储路径
@Value("${IMG_SERVER_URL}")
private String img_server_url;//图片服务器域名
private static String CONTENT_FLODER="/content/";
@RequestMapping("/uploadFile")
public Result uploadFile(MultipartFile file,String moudle){
Result result = new Result();
try {
if (!file.isEmpty()) {
//获取文件名称
String filename = file.getOriginalFilename();
//限制文件上传的类型
if ("image/png".equals(file.getContentType())||"image/jpeg".equals(file.getContentType())||"image/jpg".equals(file.getContentType())) {
//不同的moudle对应不同的目录
String dirPath=file_upload_Path+"/"+moudle+"/";
File folder =new File(dirPath);
//如果保存文件的地址不存在，就先创建目录
if(!folder.exists()){
folder.mkdirs();
}
File newFile = new File(file_upload_Path+"/"+moudle+"/", filename);
//完成文件上传
file.transferTo(newFile);
String url = img_server_url + CONTENT_FLODER+moudle+"/"+filename;
result.addDefaultModel(url);
}
}
}
catch (Exception e) {
e.printStackTrace();
result.setSuccess(false);
return result;
}
return result;
}
}增加配置项，在pzmall-basic-manweb下的resources/config目录下新增application.properties文件，加入我们需要的文件地址，以及图片服务器域名配置：
FILE_Upload_Path=D:/webserver/images/content
IMG_SERVER_URL=http://img.pz.com图片服务器搭建
在开始搭建之前，我们先下载nginx服务器，下载地址：
Nginx:http://nginx.org/en/download.html。下载后，将文件解压到D:\webserver目录下，没有的话请自行建立文件夹。
打开cmd命令行输入命令 cd D:\webserver\nginx-1.12.2 后回车，进入nginx目录。再输入命令 start nginx。
访问页面127.0.0.1,看见页面效果如下。
到此为止，nginx安装到位。
我们先打开nginx的安装文件夹，新建一个servers目录，然后新建一个文件imgserver.conf。我们还是给我们的图片服务器取个域名，就叫img.pz.com吧。我们增加点配置让nginx来充当我们的图片服务器吧。
server{
listen 80;
server_name img.pz.com;
location / {
root D:/webserver/images;
index index.html index.htm;
}
}好了，到此为止，我们的图片上传的解决之路就完成了。我们一起来看看效果吧。
腾讯云开发者
