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

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

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

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

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

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

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

1. 配置OSS客戶端：通過@Value注入阿里云OSS的Endpoint、AccessKeyId、AccessKeySecret和BucketName。
2. 創(chuàng)建簽名接口：
`java
@GetMapping("/policy")
public R policy() {
// 1. 設(shè)置簽名過期時間（例如1小時）
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/"); // 前端上傳時需要指定的目錄
respMap.put("host", "https://" + bucketName + "." + endpoint); // OSS上傳地址
respMap.put("expire", String.valueOf(expireEndTime / 1000)); // 過期時間戳（秒）

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

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

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

關(guān)鍵步驟：

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

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

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

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

五、

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

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

此模式是構(gòu)建現(xiàn)代Web應(yīng)用中資源上傳功能的典范，可以輕松復(fù)用到商品圖片、用戶頭像等其他需要文件管理的場景中。