我带的实习生竟然把照片直接存到了服务器上！崩溃了-天涯论坛

b1gc8v 发表于 2024-11-1 19:44:20

我带的实习生竟然把照片直接存到了服务器上！崩溃了

小二是新来的实习生，做为技术 leader，我给他安排了一个非常简单的练手任务，把前端 markdown 编辑器里上传的照片保留到服务器端，结果他真的就把照片直接保留到了服务器上，这下可把我气坏了，就不可搞个对象存储服务，例如说 OSS、MinIO？
他理直气壮地反驳道：“谁让你不讲清楚，我去找老板把你开掉！”我瞬间就怂了，说，“来来来，我手把手教你怎么把照片保留到 OSS 上，好欠好？”
“不消了，还是我来教你吧。”小二非常自信，下面是他在 Spring Boot 应用中整合 OSS 做的记录。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1、开通 OSS</h1>
OSS 亦便是 Object Storage Service，是阿里云供给的一套对象存储服务，国内的竞品还有七牛云的 Kodo和腾讯云的COS。
第1步，登录阿里云官网，搜索“OSS”关键字，进入 OSS 制品页。
第二步，倘若是 OSS 新用户的话，能够享受 6 个月的新人专享优惠价，不外续费的时候还是会肉疼。
第三步，进入 OSS 管理掌控台，点击「Bucket 列表」，点击「创建 Bucket」。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/24d7c9e444a14f99b3063fdaed7f2b33~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=t7Carj6OsBnZOYY2EErJaUC6TV0%3D" style="width: 50%; margin-bottom: 20px;"></div>
Bucket 的词面意思是桶，这儿指存储空间，便是用于存储对象的容器。重视读写权限为“公共读”，亦便是准许互联网用户拜访云空间上的照片。
第四步，点击「确定」就算是开通成功了。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2、整合 OSS</h1>
第1步，在 pom.xml 文件中添加 OSS 的依赖。
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
第二步，在 application.yml 文件中添加 OSS 配置项。aliyun:
oss:
# oss对外服务的拜访域名
endpoint: oss-cn-beijing.aliyuncs.com
# 拜访身份验证中用到用户标识
accessKeyId: LTAI5
# 用户用于加密签名字符串和oss用来验证签名字符串的密钥
accessKeySecret: RYN
# oss的存储空间
bucketName: itwanger-oss1
# 上传文件体积(M)
maxSize: 3
# 上传文件夹路径前缀
dir:
prefix: codingmore/images/
第三步，新增 OssClientConfig.java 配置类，重点便是经过 @Value 注解从配置文件中获取配置项，然后创建 OSSClient。@Configuration
public class OssClientConfig {
@Value("${aliyun.oss.endpoint}")
String endpoint ;
@Value("${aliyun.oss.accessKeyId}")String accessKeyId ;@Value("${aliyun.oss.accessKeySecret}")
String accessKeySecret;

@Bean
public OSSClient createOssClient() {
return(OSSClient)new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
}
}第四步，新增文件上传接口 OssController.java，参数为 MultipartFile。@Controller
@Api(tags = "上传")
@RequestMapping("/ossController")
public class OssController {
@Autowired
private IOssService ossService;

@RequestMapping(value = "/upload",method=RequestMethod.POST)@ResponseBody
@ApiOperation("上传")
public ResultObject<String> upload(@RequestParam("file") MultipartFile file, HttpServletRequest req) {
return ResultObject.success(ossService.upload(file));
}
}
第五步，新增 Service，将文件上传到 OSS，并返回文件保留路径。@Service
public class OssServiceImpl implements IOssService{

@Value("${aliyun.oss.maxSize}")
private int maxSize;

@Value("${aliyun.oss.bucketName}")
private String bucketName;

@Value("${aliyun.oss.dir.prefix}")
privateString dirPrefix;@Autowired
private OSSClient ossClient;
@Override
public String upload(MultipartFile file) {
try {
returnupload(file.getInputStream(), file.getOriginalFilename());
}catch (IOException e) {
LOGGER.error(e.getMessage());
}
return null;
}

@Override
publicString upload(InputStream inputStream,String name) {
String objectName = getBucketName(name);// 创建PutObject请求。
ossClient.putObject(bucketName, objectName, inputStream);
returnformatPath(objectName);
}private String getBucketName(String url){
String ext = "";
for(String extItem:imageExtension){
if(url.indexOf(extItem) != -1){
ext = extItem;break;
}
}
return dirPrefix+ DateUtil.today()+"/"+ IdUtil.randomUUID()+ext;
}

privateString formatPath(String objectName){return "https://" +bucketName+"."+ ossClient.getEndpoint().getHost() + "/" + objectName;
}
}
第六步，打开 Apipost，测试 OSS 上传接口，重视参数选取文件，点击发送后能够看到服务器端返回的照片链接。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/fbe84bbf0c54439f9e6d54b94153f678~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=PuyH19PwdSGGqwPiRsPOAJ%2FzmSA%3D" style="width: 50%; margin-bottom: 20px;"></div>
第七步，进入阿里云 OSS 后台管理，能够确认照片确实已然上传成功。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1ec6d1a798b0403fb71d03754af3ab96~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=I%2Bhu7QenicrEi94OcxU4q%2FDB1Vs%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3、拉取前端代码来测试 OSS 上传接口</h1>
codingmore-admin-web 是编程喵（Codingmore）的前端管理项目，能够经过下面的位置拉取到本地。
https://github.com/itwanger/codingmore-admin-web
执行 yarn run dev 命令后就能够起步 Web 管理端了，进入到文案编辑页面，选取一张照片进行上传，能够确认照片是能够正常从前端上传到服务器端，服务器端再上传到 OSS，之后再返回前端照片拜访链接的。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/b17c9d0190f2480bbe2f771971dfd1a2~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=eknKRTo9zDDowDGcG7Kzxqlxdv4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">4、利用 OSS 进行自动转链</h1>
第1步，在 PostsServiceImpl.java 中添加照片转链的办法，重点利用正则表达式找出文案内容中的外链，而后将外链的照片上传到 OSS，而后再替换掉原来的外链照片。// 匹配照片的 markdown 语法
// ![](hhhx.png)
// !(hhhx.png?ax)
public static finalString IMG_PATTERN ="\\!\\[.*\\]\$(.*)\$";

private void handleContentImg(Posts posts) {
String content = posts.getPostContent();

Pattern p = Pattern.compile(IMG_PATTERN, Pattern.CASE_INSENSITIVE);
Matcher m = p.matcher(content);

Map<String, Future<String>>map = new HashMap<>();

while(m.find()) {
String imageTag = m.group();
LOGGER.info("运用分组进行替换{}", imageTag);

String imageUrl = imageTag.substring(imageTag.indexOf("(") + 1, imageTag.indexOf(")"));

// 确认是本站链接，不处理
if (imageUrl.indexOf(iOssService.getEndPoint()) != -1) {
continue;
}

// 经过线程池将照片上传到 OSS
Future<String> future= ossUploadImageExecutor.submit(() -> {return iOssService.upload(imageUrl);
});
map.put(imageUrl, future);
}

for (String oldUrl : map.keySet()) {
Future<String>future = map.get(oldUrl);

try {
String imageUrl = future.get();
content = content.replace(oldUrl, imageUrl);
} catch(InterruptedException | ExecutionException e) {
LOGGER.error("获取照片链接出错{}", e.getMessage());
}

}
posts.setPostContent(content);
}
第二步，在 OssServiceImpl.java 中添加按照外链位置上传照片到 OSS 的办法。public String upload(String url) {
String objectName = getFileName(url);
try (InputStream inputStream = newURL(url).openStream()) {
ossClient.putObject(bucketName, objectName, inputStream);
}catch (IOException e) {
LOGGER.error(e.getMessage());
}
returnformatOSSPath(objectName);
}第三步，经过 Web 管理端来测试外链是不是转链成功。先找两张外链的照片，能够看到 markdown 在预览的时候就不表示。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/733b615200884ff3a137317b9017138c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=qnccKyzMVrbsAGCJN6WpP3qZ6wI%3D" style="width: 50%; margin-bottom: 20px;"></div>
而后咱们点击发布，能够看到两张照片都正常表示了，由于转成为了 OSS 的照片拜访位置。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/1bee9cd009ec4e85a7d574cb4bb98cb9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729712146&x-signature=ZL3biA5fwHZflwr%2BNbvhgH49Yjc%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">5、小结</h1>
综上来看，实习生小二在 Spring Boot 中整合 OSS 的代码还是挺可靠的。亦许 OSS+CDN 才是图床的最好处理方法，不外阿里云的 HTTPS CDN 在 GitHub 上没法回源引起照片不表示的问题仍然无得到有效的处理。

b1gc8v 发表于 2024-11-7 17:00:37

楼主继续加油啊！外链论坛加油！

nqkk58 发表于 2024-11-8 05:49:36

期待更新、坐等、迫不及待等。

页: [1]

天涯论坛's Archiver

我带的实习生竟然把照片直接存到了服务器上！崩溃了