京淘项目图片上传及Nginx代理域名访问
1.文件上传入门
1.1在webapp/file.jsp
查看基本属性
1.2 创建并编辑FileController
package com.jt.controller;
import java.io.File;
import java.io.IOException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class FileController {
/**
* 当用户上传完成时重定向到上传页面
* 思路:
* 1.获取用户文件信息 包含文件名称
* 2.指定文件上传路径,如果没有则创建文件夹
* 3.实现文件上传
* 4.重定向到原页面
* @return
* @throws IOException
* @throws IllegalStateException
*/
@RequestMapping("/file")
public String fileController(MultipartFile fileImage) throws IllegalStateException, IOException {
//获取input标签中的值
String inputName = fileImage.getName();
//获取文件名
String fileName = fileImage.getOriginalFilename().toLowerCase();
//定义上传文件路径
File fileDir = new File("G:/CGBv3.0/JT/image/i");
if(!fileDir.exists()) {
fileDir.mkdirs();
}
//上传文件
fileImage.transferTo(new File(fileDir+"/"+fileName));
//重定向到原页面
return "redirect:/file.jsp";
}
}
需要注意的是:
- 开启多媒体标签
enctype="multipart/form-data"
- 使用工具API进行接收
MultipartFile 参数名称 必须与input标签中的name属性一致.
- 实现文件上传(转义的双斜杠最好换成“/“)
- file.jsp中的action地址必须与
FileController
中要访问的路径一致
1.3 启动测试
访问http://localhost:8090/file.jsp
选择需要上传的文件,点击提交,上传成功!
2. 上传京淘项目中图片
2.1查询上传图片的url
Dir=image
表示上传为图片
2.查询页面js
2.2 定义vo对象
数据回显要求
{"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}
error 表示文件上传是否正确
package com.jt.vo;
import lombok.Data;
import lombok.experimental.Accessors;
@Data
@Accessors(chain = true)
public class ImageVO {
private Integer error;
private String url;
private Integer width;
private Integer height;
}
2.3编辑FileController
@Autowired
private FileService fileService;
//localhost:8090/pic/upload?dir=image
@RequestMapping("/pic/upload")
@ResponseBody
public ImageVO fileImage(MultipartFile uploadFile) {
return fileService.uploadFile(uploadFile);
}
2.4创建并编辑FileServiceImpl
package com.jt.service;
import java.awt.image.BufferedImage;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import javax.imageio.ImageIO;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import com.jt.vo.ImageVO;
@Service
public class FileServiceImpl implements FileService {
@Override
public ImageVO uploadFile(MultipartFile uploadFile) {
ImageVO imageVO = new ImageVO();
//获取文件名
String fileName = uploadFile.getOriginalFilename().toLowerCase();
//校验是否为图片,使用正则
if(!fileName.matches("^.+\\.(jpg|png|gif)$")) {
imageVO.setError(1);
return imageVO;
}
//3.判断是否为恶意程序
try {
BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());
int width = bufferedImage.getWidth();
int height = bufferedImage.getHeight();
if(width==0||height==0) {
imageVO.setError(1);
return imageVO;
}
//4.时间转化为字符串 2019/12/25
String dateDir = new SimpleDateFormat("yy/MM/dd").format(new Date());
//定义文件上传路径
String localDir = "G:/CGBv3.0/JT/image/";
File fileDir = new File(localDir+dateDir);
//判断文件夹是否存在
if(!fileDir.exists()) {
fileDir.mkdirs();
}
//6.使用UUID定义文件名称 uuid.jpg
String uuid = UUID.randomUUID().toString().replace("-", "");
//动态获取图片类型—— ".jpg"
String fileType = fileName.substring(fileName.lastIndexOf("."));
//拼接新的路径
String realUploadDir = localDir + dateDir +"/"+uuid+fileType;
uploadFile.transferTo(new File(realUploadDir));
//将文件文件信息回传给页面
imageVO.setError(0).setWidth(width).setHeight(height);
} catch (Exception e) {
e.printStackTrace();
imageVO.setError(1);
return imageVO;
}
return imageVO;
}
}
2.5启动测试
到这里图片文件只能上传成功,但还不能回显
2.6 图片回显
文件上传后,将数据保存到本地磁盘中.但是该图片只允许本机自己访问.如果需要通过浏览器访问.则必须设定虚拟访问地址.
根据URL地址拼接虚拟路径
.之后测试文件上传是否成功
// 定义虚拟路径
private String urlPath = "http://image.jt.com/";
//拼接url路径
String realUrlPath = urlPath+dateDir+"/"+uuid+fileType;
//将文件文件信息回传给页面
imageVO.setError(0).setWidth(width).setHeight(height)
.setUrl(realUrlPath);
用户通过虚拟路径访问.之后利用转化的机制,将虚拟路径转化为本地磁盘路径.这时用户可以访问真实的图片信息.
3.反向代理—Nginx
当用户发起请求根据规则拦截请求后,代替用户访问真实资源的过程
,称为反向代理。
nginx特点
1.并发能力强 5万/秒---3万/秒 tomcat:220/秒—150/秒
并发能力受限于 网络/硬件条件.
2.轻量级 占用磁盘空间 不到2M
3.1Nginx下载安装
官网:nginx.org
下载解压的指定目录,不要带空格
。
3.2启动运行
使用管理员权限,打开cmd窗口,cd到nignx安装目录,使用命令行启动
start nginx //启动
nginx -s reload //重新加载
nginx -s stop //停止服务
在任务管理器中能看到进程启动情况
nginx默认访问80端口,启动浏览器访问localhost
,如下显示,即启动成功
3.3 Nginx 配置文件
目录:Nginx/conf/nginx.conf
#server代表一个服务项
server {
listen 80; #监听端口
#server_name 表示拦截域名
server_name localhost;
#拦截请求之后处理方式
location / {
#root 是关键字 代表反向代理的文件夹名称
root html;
#index 默认跳转页面
index index.html index.htm;
}
业务中反向代理需要把image.jt.com
路径替换为本地路径G:/CGBv3.0/JT/image
即:http://image.jt.com/2019/12/26/7e2c008a24c04939905fb782faf0fa55.jpg
3.4配置图片服务器
在nginx.conf最后添加如下配置,编辑完成后重启nginx
#配置图片服务器
server {
listen 80; #监听80端口
server_name image.jt.com; #监听的域名
location / { #转发或处理
root G:/CGBv3.0/JT/image;
}
}
3.5编辑host文件
host文件位置:C:\Windows\System32\drivers\etc
,在最后添加如下配置
127.0.0.1 localhost
127.0.0.1 image.jt.com
127.0.0.1 www.jt.com
127.0.0.1 manage.jt.com
127.0.0.1 sso.jt.com
127.0.0.1 cart.jt.com
127.0.0.1 order.jt.com
调用过程:
- 用户发起http请求image.jt.com;
- 通过hosts文件,将用户请求地址映射到本机中.
- Nginx接收到用户请求之后进行反向代理最终实现数据访问.
3.6 启动测试
访问此地址:http://image.jt.com/2019/12/26/7e2c008a24c04939905fb782faf0fa55.jpg
,成功!
备注:启动nginx代理时,需要把其它代理关掉
4.项目优化
有时文件上传地址/url地址可能会根据环境不同发生变化.如果路径发生修改则必然修改java代码!
将重要文件提取到配置中
- 新建并编辑
image.properties
#配置本地磁盘路径
image.localPath=G:/CGBv3.0/JT/image/
#配置虚拟路径
image.urlPath=http://image.jt.com/
- 编辑
FileServiceImpl
@Service
@PropertySource("classpath:/properties/image.properties")
public class FileServiceImpl implements FileService {
// 定义虚拟路径
@Value("${image.urlPath}")
private String urlPath;
// private String urlPath = "http://image.jt.com/";
//定义本地文件路径
@Value("${image.localPath}")
private String localDir;
5.通过域名访问服务器
- 配置Nginx
#后台管理服务器 用户访问manage.jt.com时访问localhost:8091
server {
listen 80;
server_name manage.jt.com;
location / {
#代理路径
proxy_pass http://localhost:8091;
}
}
修改后,重启Nginx
- 启动访问测试,页面效果:
附录:正则表达式
* 正则常用字符:
* 1.^ 标识..开始
* 2.$ 标识以...结束
* 3.点. 任意单个字符
* 4.* 表示任意个 0~~~~无穷
* 5.+ 表示 1~~~~无穷
* 6.\. 标识特殊字符.
* 7.(xxx|xx|xxx) 代表分组 满足其中一个条件即可