一、使用tomcat搭建本地图片服务器
- 准备一个tomcat服务器:
2.进入conf目录下,修改server.xml文件中的相关端口:
- 停止服务端口8005
<Server port="8065" shutdown="SHUTDOWN">
- HTTP端口8080
<Connector port="8765" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
- AJP端口8009
<Connector port="8069" protocol="AJP/1.3" redirectPort="8443" />
- 修改server.xml文件,通过Context配置文件部署图片项目
增加的配置语句:
<Context path="/img" docBase="E:\img-upload"></Context>
- path:浏览器访问时的路径名前缀;
- docBase:web项目的WebRoot所在的路径,注意是WebRoot的路径,不是项目的路径。这里比较简单,直接就是图片的存储路径。
- 测试
- 在磁盘E:\img-upload目录下放一张图片
- 启动刚刚的tomcat服务器
- 访问刚刚放入的图片:http://localhost:8765/img/cat.jpeg
如果能够访问到刚刚的图片,说明图片服务器搭建就成功了。
二、使用Spring Boot工程上传图片并及时显示
- 创建一个简单的spring boot工程,项目结构如下:
2. 导入maven依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
</dependency>
- 编写application.yml 配置文件
server:
port: 8888 # 修改端口号
# spring boot默认文件上传大小为1MB,这里修改一下文件大小限制
spring:
servlet:
multipart:
max-file-size: 12MB # 单个文件上传大小
max-request-size: 12MB # 单次请求的文件的总大小
imgupload:
size: 10485760 # 上传图片大小限制 10M
path: E:\img-upload # 图片上传路径
server-prefix: http://localhost:8765/img/ # 图片上传到服务器以后访问图片的url完整前缀
- 编写UploadConfig文件,读取图片上传的配置信息:
@Component
@ConfigurationProperties(prefix = "imgupload")
public class UploadConfig {
public Integer size;
public String path;
public String serverPrefix;
public void setSize(Integer size) {
this.size = size;
}
public void setPath(String path) {
this.path = path;
}
public void setServerPrefix(String serverPrefix) {
this.serverPrefix = serverPrefix;
}
}
- 编写一个简易的图片上传工具类,简单校验图片上传
public class ImgUploadUitls {
/**
* 允许上传的图片后缀名类型
*/
public static final List<String> ALL_IMG_TYPE = Arrays.asList(new String[]{".gif", ".png", ".jpeg", ".jpg", ".bmp"});
/**
* 判断图片文件扩展名是否合法
*
* @param extensionName
* @return
*/
public static boolean validateImgType(String extensionName) {
return ALL_IMG_TYPE.contains(extensionName);
}
}
- 编写图片上传UploadController
@RestController
@RequestMapping("/upload")
public class UploadController {
// 日志对象
protected static Logger logger = LoggerFactory.getLogger(UploadController.class);
// 注入图片上传配置对象
@Autowired
private UploadConfig uploadConfig;
/**
* 上传图片,并访问图片服务器上的图片
*
* @param file
* @param response
*/
@PostMapping("uploadImg")
public void uploadImg(@RequestParam("file") MultipartFile file, HttpServletResponse response) {
try {
// 判断上传的文件是否为空
if (file == null || file.isEmpty())
throw new Exception("上传图片为空!");
// 判断文件是否超过大小限制
if (file.getBytes().length > uploadConfig.size)
throw new Exception("上传图片太大,请不要超过" + (uploadConfig.size / 1024 / 1024) + "M!");
// 获取文件原始名称
String originalFilename = file.getOriginalFilename();
// 获取文件的后缀名
String extensionName = originalFilename.substring(originalFilename.lastIndexOf("."));
// 如果文件后缀名合法
if (!ImgUploadUitls.validateImgType(extensionName))
throw new Exception("上传图片非法!");
File pFile = new File(uploadConfig.path);
// 判断父目录是否存在,不存在就创建
if (!pFile.exists()) {
pFile.mkdirs();
}
// 生成新的文件名称
String newFileName = System.currentTimeMillis() + extensionName;
// 保存图片到本地目录下
file.transferTo(new File(pFile, newFileName));
// 图片在图片服务器上的访问url
String imgUrl = uploadConfig.serverPrefix + newFileName;
// 重定向,通过图片url用新的页面打开上传的图片
response.sendRedirect(imgUrl);
return;
} catch (Exception e) {
e.printStackTrace();
logger.error("图片上传失败!", e);
// 回写,通知图片上传失败
response.setContentType("text/html;charset=UTF-8"); // 设置响应类型
try {
response.getWriter().write("图片上传失败:" + e.getMessage());
} catch (IOException ex) {
logger.error("图片上传失败!", ex);
}
}
}
}
这个实现图片上传的方法比较简陋,还有很多可以完善的地方,代码中带有详细的注释,就不做过多的赘述了。
- 编写图片上传html页面upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" action="/upload/uploadImg">
<input type="file" name="file" value="图片上传">
<input type="submit" value="点击上传图片">
</form>
</body>
</html>
- 测试,启动项目,访问:http://localhost:8888/upload.html,进行图片上传
如果自动跳转到上传图片的服务器地址,并显示出图片则说明测试成功