editor.md+springmvc怎么上传本地图片_猿实战4——手把手教你构建属于你自己的电商系统之通用图片服务器...-CSDN博客

猿实战是一个原创系列文章，通过实战的方式，采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统，跟着教程走下来，变身猿人找到工作不是问题。想要一起实战吗？获取基础代码，还是私信我吧，黑机构太多，老是举报我，大号都被封号了，质量怎么样？他们不怕会这样搞吗。

在上一章节品牌管理的设计和实现中。你一定会遇到一个小麻烦——文件上传。文件上传，其实是一个老生常谈的话题，在之前的文章中，猿人君也多次提及。在上一章节中，细心的你或许会发现一个标签，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:webservernginx-1.12.2 后回车，进入nginx目录。再输入命令 start nginx。

访问页面127.0.0.1,看见页面效果如下。

到此为止，nginx安装到位。

我们先打开nginx的安装文件夹，新建一个servers目录，然后新建一个文件imgserver.conf。我们还是给我们的图片服务器取个域名，就叫http://img.pz.com吧。我们增加点配置让nginx来充当我们的图片服务器吧。

server{
listen 80;
server_name img.pz.com;
 
location / {
root  D:/webserver/images;
index index.html index.htm;
}
}

好了，到此为止，我们的图片上传的解决之路就完成了。我们一起来看看效果吧。

想要一起实战吗？获取基础代码，还是私信我吧，黑机构太多，老是举报我，大号都被封号了，质量怎么样？他们不怕会这样搞吗。