Guli商城商品服務(wù) 品牌管理模塊與OSS服務(wù)端簽名獲取的整合實(shí)現(xiàn)（續(xù)）

在上一部分的討論中，我們介紹了Guli商城商品服務(wù)中品牌管理的基礎(chǔ)功能，并初步探討了與阿里云對象存儲(chǔ)服務(wù)（OSS）集成的必要性。本文將繼續(xù)深入，詳細(xì)闡述如何通過服務(wù)端簽名方式實(shí)現(xiàn)品牌Logo圖片的安全上傳，并完成前后端在品牌管理中的協(xié)同流程。

一、服務(wù)端簽名獲取的必要性與安全考量

在前端直接上傳文件至OSS時(shí)，若將訪問密鑰硬編碼在前端代碼中，會(huì)帶來極大的安全風(fēng)險(xiǎn)。因此，最佳實(shí)踐是采用“服務(wù)端簽名后，前端直傳”的模式。該模式流程如下：

前端請求：當(dāng)用戶在品牌管理界面選擇Logo圖片后，前端向Guli商城的商品服務(wù)后端發(fā)起請求，申請一個(gè)用于上傳到OSS的臨時(shí)憑證（簽名）。
后端生成簽名：商品服務(wù)后端根據(jù)配置的OSS訪問密鑰（妥善保管在服務(wù)端），生成一個(gè)具有臨時(shí)有效性和嚴(yán)格權(quán)限限制的上傳策略和簽名。
前端直傳OSS：前端獲得簽名后，直接使用該簽名將圖片文件上傳至OSS的指定存儲(chǔ)空間（Bucket），完全繞過應(yīng)用服務(wù)器，減輕其帶寬和負(fù)載壓力。
保存數(shù)據(jù)：上傳成功后，OSS會(huì)返回文件的訪問URL。前端將此URL作為logo字段的值，與品牌名稱、首字母等其他信息一并提交給商品服務(wù)的品牌管理API，完成品牌記錄的創(chuàng)建或更新。

二、商品服務(wù)后端：簽名接口實(shí)現(xiàn)

在品牌管理相關(guān)的控制器（如 OssController）中，我們需要提供一個(gè)生成簽名的API端點(diǎn)。

關(guān)鍵代碼邏輯（示例為Spring Boot框架）：

1. 配置OSS客戶端：通過@Value注入阿里云OSS的Endpoint、AccessKeyId、AccessKeySecret和BucketName。
2. 創(chuàng)建簽名接口：
`java
@GetMapping("/policy")
public R policy() {
// 1. 設(shè)置簽名過期時(shí)間（例如1小時(shí)）
long expireTime = 3600;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);

// 2. 設(shè)置上傳策略：限制文件大小、前綴、成功后的返回狀態(tài)碼等
PolicyConditions policyConds = new PolicyConditions();
policyConds.addConditionItem(PolicyConditions.CONDCONTENTLENGTHRANGE, 0, 10485760); // 限制10MB
policyConds.addConditionItem(PolicyConditions.CONDKEY, PolicyConditions.STARTSWITH, "guli-mall/brand/"); // 指定目錄

// 3. 生成PostPolicy和簽名
String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF8);
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = ossClient.calculatePostSignature(postPolicy);

// 4. 構(gòu)建返回給前端的JSON數(shù)據(jù)
Map respMap = new LinkedHashMap<>();
respMap.put("accessid", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", "guli-mall/brand/"); // 前端上傳時(shí)需要指定的目錄
respMap.put("host", "https://" + bucketName + "." + endpoint); // OSS上傳地址
respMap.put("expire", String.valueOf(expireEndTime / 1000)); // 過期時(shí)間戳（秒）

return R.ok().data(respMap);
}
`

### 三、前端（Vue/Element-UI）：整合上傳流程

在前端品牌管理表單中，整合OSS直傳功能。

關(guān)鍵步驟：

選擇文件時(shí)觸發(fā)：當(dāng)用戶點(diǎn)擊上傳Logo組件時(shí)，首先調(diào)用后端的/product/oss/policy接口獲取上傳憑證。
使用憑證直傳：獲得憑證后，使用如axios等工具，構(gòu)造一個(gè)FormData，將文件、憑證（policy, signature, OSSAccessKeyId等）一并提交到OSS的host地址。
處理回調(diào)：上傳成功（OSS返回200狀態(tài)碼）后，從響應(yīng)中或根據(jù)拼接規(guī)則（host + dir + 文件名）獲取Logo的完整URL，并將其賦值給表單模型的brand.logo字段。
提交品牌信息：用戶填寫完其他品牌信息后，點(diǎn)擊表單提交按鈕。前端將包含logo URL的品牌對象通過品牌管理API（如POST /product/brand/save）提交給后端，持久化到數(shù)據(jù)庫。

四、品牌管理API的增強(qiáng)

品牌管理的BrandController中的新增（save）和修改（update）接口，現(xiàn)在需要接收并處理來自前端的logo字段。后端實(shí)體類BrandEntity應(yīng)包含對應(yīng)的logo屬性，用于存儲(chǔ)圖片的絕對或相對URL。

數(shù)據(jù)流閉環(huán)：
前端表單 -> 獲取OSS簽名 -> 前端直傳OSS -> 獲得Logo URL -> 攜帶URL提交品牌數(shù)據(jù) -> 后端保存至數(shù)據(jù)庫 -> 品牌列表/詳情頁展示時(shí)，直接使用存儲(chǔ)的URL渲染Logo圖片。