小二是新來(lái)的實(shí)習(xí)生，作為技術(shù) leader，我給他安排了一個(gè)非常簡(jiǎn)單的練手任務(wù)，把前端 markdown 編輯器里上傳的圖片保存到服務(wù)器端，結(jié)果他真的就把圖片直接保存到了服務(wù)器上，這下可把我氣壞了，就不能搞個(gè)對(duì)象存儲(chǔ)服務(wù)，比如說(shuō) OSS、MinIO？

他理直氣壯地反駁道：“誰(shuí)讓你不講清楚，我去找老板把你開(kāi)掉！”我瞬間就慫了，說(shuō)，“來(lái)來(lái)來(lái)，我手把手教你怎么把圖片保存到 OSS 上，好不好？”

“不用了，還是我來(lái)教你吧。”小二非常自信，下面是他在 Spring Boot 應(yīng)用中整合 OSS 做的記錄。

一、開(kāi)通 OSS

OSS 也就是 Object Storage Service，是阿里云提供的一套對(duì)象存儲(chǔ)服務(wù)，國(guó)內(nèi)的競(jìng)品還有七牛云的 Kodo和騰訊云的COS。

第一步，登錄阿里云官網(wǎng)，搜索“OSS”關(guān)鍵字，進(jìn)入 OSS 產(chǎn)品頁(yè)。

第二步，如果是 OSS 新用戶(hù)的話(huà)，可以享受 6 個(gè)月的新人專(zhuān)享優(yōu)惠價(jià)，不過(guò)續(xù)費(fèi)的時(shí)候還是會(huì)肉疼。

第三步，進(jìn)入 OSS 管理控制臺(tái)，點(diǎn)擊「Bucket 列表」，點(diǎn)擊「創(chuàng)建 Bucket」。

Bucket 的詞面意思是桶，這里指存儲(chǔ)空間，就是用于存儲(chǔ)對(duì)象的容器。注意讀寫(xiě)權(quán)限為“公共讀”，也就是允許互聯(lián)網(wǎng)用戶(hù)訪(fǎng)問(wèn)云空間上的圖片。

第四步，點(diǎn)擊「確定」就算是開(kāi)通成功了。

二、整合 OSS

第一步，在 pom.xml 文件中添加 OSS 的依賴(lài)。

com.aliyun.oss
aliyun-sdk-oss
3.10.2

第二步，在 application.yml 文件中添加 OSS 配置項(xiàng)。

aliyun:
oss:
#oss對(duì)外服務(wù)的訪(fǎng)問(wèn)域名
endpoint:oss-cn-beijing.aliyuncs.com
#訪(fǎng)問(wèn)身份驗(yàn)證中用到用戶(hù)標(biāo)識(shí)
accessKeyId:LTAI5
#用戶(hù)用于加密簽名字符串和oss用來(lái)驗(yàn)證簽名字符串的密鑰
accessKeySecret:RYN
#oss的存儲(chǔ)空間
bucketName:itwanger-oss1
#上傳文件大小(M)
maxSize:3
#上傳文件夾路徑前綴
dir:
prefix:codingmore/images/

第三步，新增 OssClientConfig.java 配置類(lèi)，主要就是通過(guò) @Value 注解從配置文件中獲取配置項(xiàng)，然后創(chuàng)建 OSSClient。

@Configuration
publicclassOssClientConfig{
@Value("${aliyun.oss.endpoint}")
Stringendpoint;
@Value("${aliyun.oss.accessKeyId}")
StringaccessKeyId;
@Value("${aliyun.oss.accessKeySecret}")
StringaccessKeySecret;

@Bean
publicOSSClientcreateOssClient(){
return(OSSClient)newOSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);
}
}

第四步，新增文件上傳接口 OssController.java，參數(shù)為 MultipartFile。

@Controller
@Api(tags="上傳")
@RequestMapping("/ossController")
publicclassOssController{
@Autowired
privateIOssServiceossService;

@RequestMapping(value="/upload",method=RequestMethod.POST)
@ResponseBody
@ApiOperation("上傳")
publicResultObjectupload(@RequestParam("file")MultipartFilefile,HttpServletRequestreq){
returnResultObject.success(ossService.upload(file));
}
}

第五步，新增 Service，將文件上傳到 OSS，并返回文件保存路徑。

@Service
publicclassOssServiceImplimplementsIOssService{

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

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

@Value("${aliyun.oss.dir.prefix}")
privateStringdirPrefix;

@Autowired
privateOSSClientossClient;
@Override
publicStringupload(MultipartFilefile){
try{
returnupload(file.getInputStream(),file.getOriginalFilename());
}catch(IOExceptione){
LOGGER.error(e.getMessage());
}
returnnull;
}

@Override
publicStringupload(InputStreaminputStream,Stringname){
StringobjectName=getBucketName(name);
//創(chuàng)建PutObject請(qǐng)求。
ossClient.putObject(bucketName,objectName,inputStream);
returnformatPath(objectName);
}
privateStringgetBucketName(Stringurl){
Stringext="";
for(StringextItem:imageExtension){
if(url.indexOf(extItem)!=-1){
ext=extItem;
break;
}
}
returndirPrefix+DateUtil.today()+"/"+IdUtil.randomUUID()+ext;
}

privateStringformatPath(StringobjectName){
return"https://"+bucketName+"."+ossClient.getEndpoint().getHost()+"/"+objectName;
}
}

第六步，打開(kāi) Apipost，測(cè)試 OSS 上傳接口，注意參數(shù)選擇文件，點(diǎn)擊發(fā)送后可以看到服務(wù)器端返回的圖片鏈接。

第七步，進(jìn)入阿里云 OSS 后臺(tái)管理，可以確認(rèn)圖片確實(shí)已經(jīng)上傳成功。

三、拉取前端代碼來(lái)測(cè)試 OSS 上傳接口

codingmore-admin-web 是編程喵（Codingmore）的前端管理項(xiàng)目，可以通過(guò)下面的地址拉取到本地。

https://github.com/itwanger/codingmore-admin-web

執(zhí)行 yarn run dev 命令后就可以啟動(dòng) Web 管理端了，進(jìn)入到文章編輯頁(yè)面，選擇一張圖片進(jìn)行上傳，可以確認(rèn)圖片是可以正常從前端上傳到服務(wù)器端，服務(wù)器端再上傳到 OSS，之后再返回前端圖片訪(fǎng)問(wèn)鏈接的。

四、利用 OSS 進(jìn)行自動(dòng)轉(zhuǎn)鏈

第一步，在 PostsServiceImpl.java 中添加圖片轉(zhuǎn)鏈的方法，主要利用正則表達(dá)式找出文章內(nèi)容中的外鏈，然后將外鏈的圖片上傳到 OSS，然后再替換掉原來(lái)的外鏈圖片。

//匹配圖片的markdown語(yǔ)法
//![](hhhx.png)
//![xx](hhhx.png?ax)
publicstaticfinalStringIMG_PATTERN="\!\[.*\]\((.*)\)";

privatevoidhandleContentImg(Postsposts){
Stringcontent=posts.getPostContent();

Patternp=Pattern.compile(IMG_PATTERN,Pattern.CASE_INSENSITIVE);
Matcherm=p.matcher(content);

Map>map=newHashMap<>();

while(m.find()){
StringimageTag=m.group();
LOGGER.info("使用分組進(jìn)行替換{}",imageTag);

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

//確認(rèn)是本站鏈接，不處理
if(imageUrl.indexOf(iOssService.getEndPoint())!=-1){
continue;
}

//通過(guò)線(xiàn)程池將圖片上傳到OSS
Futurefuture=ossUploadImageExecutor.submit(()->{
returniOssService.upload(imageUrl);
});
map.put(imageUrl,future);
}

for(StringoldUrl:map.keySet()){
Futurefuture=map.get(oldUrl);

try{
StringimageUrl=future.get();
content=content.replace(oldUrl,imageUrl);
}catch(InterruptedException|ExecutionExceptione){
LOGGER.error("獲取圖片鏈接出錯(cuò){}",e.getMessage());
}

}
posts.setPostContent(content);
}

第二步，在 OssServiceImpl.java 中添加根據(jù)外鏈地址上傳圖片到 OSS 的方法。

publicStringupload(Stringurl){
StringobjectName=getFileName(url);
try(InputStreaminputStream=newURL(url).openStream()){
ossClient.putObject(bucketName,objectName,inputStream);
}catch(IOExceptione){
LOGGER.error(e.getMessage());
}
returnformatOSSPath(objectName);
}

第三步，通過(guò) Web 管理端來(lái)測(cè)試外鏈?zhǔn)欠褶D(zhuǎn)鏈成功。先找兩張外鏈的圖片，可以看到 markdown 在預(yù)覽的時(shí)候就不顯示。

然后我們點(diǎn)擊發(fā)布，可以看到兩張圖片都正常顯示了，因?yàn)檗D(zhuǎn)成了 OSS 的圖片訪(fǎng)問(wèn)地址。

五、小結(jié)

綜上來(lái)看，實(shí)習(xí)生小二在 Spring Boot 中整合 OSS 的代碼還是挺靠譜的，也許 OSS+CDN 才是圖床的最好解決方案。

需要源碼的小伙伴，可以直接到編程喵源碼路徑拉?。?/p>

https://github.com/itwanger/coding-more