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

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

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

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

前端請求：當用戶在品牌管理界面選擇Logo圖片后，前端向Guli商城的商品服務(wù)后端發(fā)起請求，申請一個用于上傳到OSS的臨時憑證（簽名）。
后端生成簽名：商品服務(wù)后端根據(jù)配置的OSS訪問密鑰（妥善保管在服務(wù)端），生成一個具有臨時有效性和嚴格權(quán)限限制的上傳策略和簽名。
前端直傳OSS：前端獲得簽名后，直接使用該簽名將圖片文件上傳至OSS的指定存儲空間（Bucket），完全繞過應(yīng)用服務(wù)器，減輕其帶寬和負載壓力。
保存數(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)鍵步驟：

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