乐优商场项目day08——图片(文件)上传
新增品牌时,上传图片。
因为文件的上传并不只是在品牌管理中有需求,以后的其它服务也可能需要,
所以我们创建一个独立的微服务,专门处理各种文件上传。
搭建一个微服务:
1.创建模块
2.添加依赖
依赖代码:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>leyou</artifactId>
<groupId>com.leyou.parent</groupId>
<version>1.0.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.upload</groupId>
<artifactId>leyou-upload</artifactId>
<version>1.0.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
</dependency>
</dependencies>
</project>
3.编写相关配置
配置代码如下:
server:
port: 8082
spring:
application:
name: upload-service
servlet:
multipart:
max-file-size: 5MB # 限制文件上传的大小
# Eureka
eureka:
client:
service-url:
defaultZone: http://127.0.0.1:10086/eureka
instance:
lease-renewal-interval-in-seconds: 5 # 每隔5秒发送一次心跳
lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期
4.添加引导类并添加注解:
代码如下:
@SpringBootApplication
@EnableDiscoveryClient
public class LeyouUploadApplication {
public static void main(String[] args) {
SpringApplication.run(LeyouUploadApplication.class, args);
}
}
前台页面的相关组件已经写好了,不用我们去写:
我们要去编写后台的 controller 和 service 。
1.controller
代码如下:
@Controller
@RequestMapping("upload")
public class UploadController {
@Autowired
private UploadService uploadService;
/**
* 图片上传
* @param file
* @return
*/
@PostMapping("image")
public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file){
String url = this.uploadService.uploadImage(file);
if (StringUtils.isBlank(url)) {
return ResponseEntity.badRequest().build();
}
return ResponseEntity.status(HttpStatus.CREATED).body(url);
}
}
2.service 以及 uploadImage 方法
代码如下:
@Service
public class UploadService {
private static final List<String> CONTENT_TYPES = Arrays.asList("image/jpeg", "image/gif");
private static final Logger LOGGER = LoggerFactory.getLogger(UploadService.class);
public String uploadImage(MultipartFile file) {
String originalFilename = file.getOriginalFilename();
// 校验文件的类型
String contentType = file.getContentType();
if (!CONTENT_TYPES.contains(contentType)){
// 文件类型不合法,直接返回null
LOGGER.info("文件类型不合法:{}", originalFilename);
return null;
}
try {
// 校验文件的内容
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());
if (bufferedImage == null){
LOGGER.info("文件内容不合法:{}", originalFilename);
return null;
}
// 保存到服务器
file.transferTo(new File("D:\\leyou\\images\\" + originalFilename));
// 生成url地址,返回
return "http://image.leyou.com/" + originalFilename;
} catch (IOException e) {
LOGGER.info("服务器内部错误:{}", originalFilename);
e.printStackTrace();
}
return null;
}
}
这里我们用nginx代理一个图片服务器路径:
重启 nginx
添加host解析,并启用
现在可以其实已经可以上传图片,但是我们不能这样就使用。
因为图片上传是文件的传输,如果也经过Zuul网关的代理,文件就会经过多次网路传输,造成不必要的网络负担。
在高并发时,可能导致网络阻塞,Zuul网关不可用。这样我们的整个系统就瘫痪了。
所以我们要绕过网关来上传文件。
1.修改刚刚的的nginx配置文件里的 网关配置:
修改完成后保存 并重新加载nginx (nginx -s reload).
然后我们去后台页面 新增品牌 试一下 图片上传:
上传和回显都成功了!
如果上传和回显没有成功的话,不要着急!
在网关里添加如下配置:
然后重启网关微服务。前面其他都没写错话,就也可以上传和回显成功了。
Ps:
这个 乐优商城 有好几个老师的版本,有的视频里,
你会发现他没有配置最后这个,但也上传和回显成功了。
但是我们写的时候,有可能会出现上传或者回显失败的问题,
不过我们加上最后这个配置之后,其他地方没写错的话,一般就可以解决了。
(我看的视频里,还有笔记里,都没配置这个。然后我就踩坑了。大家可以注意一下。 有什么问题也可以留言一起交流下。)