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

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

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

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

二、 商品服務后端：簽名接口實現

在品牌管理相關的控制器（如 OssController）中，我們需要提供一個生成簽名的API端點。

關鍵代碼邏輯（示例為Spring Boot框架）：

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

// 2. 設置上傳策略：限制文件大小、前綴、成功后的返回狀態碼等
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. 構建返回給前端的JSON數據
Map respMap = new LinkedHashMap<>();
respMap.put("accessid", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", "guli-mall/brand/"); // 前端上傳時需要指定的目錄
respMap.put("host", "https://" + bucketName + "." + endpoint); // OSS上傳地址
respMap.put("expire", String.valueOf(expireEndTime / 1000)); // 過期時間戳（秒）

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

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

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

關鍵步驟：

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

四、 品牌管理API的增強

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

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

五、

通過將OSS服務端簽名獲取功能無縫集成到品牌管理模塊，Guli商城實現了：

• 安全提升：避免了敏感密鑰泄露。
• 性能優化：文件上傳流量不經過應用服務器。
• 體驗流暢：前端一站式完成文件上傳與數據提交。
• 模塊解耦：文件存儲服務與核心業務邏輯分離，便于維護和擴展。

此模式是構建現代Web應用中資源上傳功能的典范，可以輕松復用到商品圖片、用戶頭像等其他需要文件管理的場景中。