OSS前端直傳+后端簽名
一、服務端簽名后前端直傳
首先安裝阿里云SDK Aliyun.OSS.SDK.NetCore
public static string accessKeyId = "你的accessKeyId";
public static string accessKeySecret = "你的accessKeySecret";
public static string bucketName = "你的桶名稱";
public static string endpoint = "oss-cn-beijing.aliyuncs.com";
public static int expireTime = 30;
public Dictionary<string, string> GetPolicy(string fileName)
{
var dir = DateTime.Now.ToString("yyyyMMdd") + "/";
// 構造OssClient實體， endpoint 格式:https://oss-cn-beijing.aliyuncs.com
var ossClient = new OssClient("https://" + endpoint, accessKeyId, accessKeySecret);
var config = new PolicyConditions();
config.AddConditionItem(PolicyConditions.CondContentLengthRange, 1, 1024L * 1024 * 1024 * 5);// 檔案大小范圍：單位byte
config.AddConditionItem(MatchMode.StartWith, PolicyConditions.CondKey, dir);
var expire = DateTimeOffset.Now.AddMinutes(30);// 過期時間
// 生成 Policy，并進行 Base64 編碼
var policy = ossClient.GeneratePostPolicy(expire.LocalDateTime, config);
var policyBase64 = Convert.ToBase64String(Encoding.UTF8.GetBytes(policy));
// 計算簽名
var hmac = new HMACSHA1(Encoding.UTF8.GetBytes(accessKeySecret));
var bytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(policyBase64));
var sign = Convert.ToBase64String(bytes);
// 將簽名和回呼的內容，回傳給前端
var host = $"https://{bucketName}.{endpoint}";
var key = $"{dir}{Guid.NewGuid()}/{fileName}";
var fullUrl = $"https://{bucketName}.{endpoint}/{key}";
var rt = new Dictionary<string, string>
{
{ "OSSAccessKeyId",accessKeyId},
{ "Host",host },
{ "key",key},
{ "policy",policyBase64},
{ "Signature",sign},
{ "success_action_status","200"},
{ "fullUrl",fullUrl },
{"expire",expire.ToString() }
};
return rt;
}
前端首先訪問后端獲取簽名,獲取簽名后使用FromData的形式上傳檔案
async startUpload() {
// 獲取后端簽名和上傳地址
const res = await axios.get("http://localhost:5152/api/OSS/GetPolicy", {
params: {
name: this.file.name
}
});
var formData = https://www.cnblogs.com/zhangjun0204/p/new FormData();
formData.append("name", this.file.name);
formData.append("OSSAccessKeyId", res.data.OSSAccessKeyId);
formData.append("key", res.data.key);
formData.append("policy", res.data.policy);
formData.append("signature", res.data.Signature);
formData.append("success_action_status", res.data.success_action_status);
formData.append("file", this.file);
axios
.post(res.data.Host, formData, {
headers: {
"Content-Type": "multipart/form-data"
},
withCredentials: false
})
.then(res => {
console.log(res);
});
}
二、服務端STS簽名前端分片上傳+斷點續傳
當檔案過大時，考慮使用分片上傳和斷點續傳的方式來上傳檔案到oss，這時我們就不能直接使用accesskeyId和accessKeySecret的方式來在前端上傳，以免暴露我們的密鑰，當然也不能直接使用第一種的方式進行簽名（或許可以，沒有找到示例，也沒有研究出來），所以我們采用STStoken的方式簽名，然后在前端使用阿里云提供的SDK進行檔案上傳，
斷點續傳的思路是在每個分片上傳的時候存盤當前檔案的上傳進度，如果中間因為各種原因無法繼續上傳時，當用戶重新上傳同一個檔案的時候，獲取檔案的上傳進度，繼續上傳沒有上傳完的部分，而不是重新上傳整個檔案，為了確保斷點續傳前后上傳的是同一個檔案，我們使用md5作為存盤進度的key值，如果是同一個檔案，則續傳，如果不是同一個檔案，則從0開始上傳，
首先登錄阿里云開通sts賬戶和權限，
安裝 aliyun-net-sdk-core和aliyun-net-sdk-sts sdk
public Dictionary<string, string> GetSTSToken()
{
//此處使用sts賬戶的id和secret
var AccessKeyID = "***";
var AccessKeySecret = "***";
string bucketName = "***";
// ststoken
IClientProfile profile = DefaultProfile.GetProfile("oss-cn-beijing", AccessKeyID, AccessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
var request = new AssumeRoleRequest();
request.RoleArn = "***";
request.RoleSessionName = "xxx";//這里的名字隨便寫
request.DurationSeconds = 3600;//過期時間
var response = client.GetAcsResponse(request);
var result = new Dictionary<string, string>
{
{"AccessKeyId", response.Credentials.AccessKeyId},
{"AccessKeySecret",response.Credentials.AccessKeySecret },
{"SecurityToken",response.Credentials.SecurityToken },
{"Expiration",response.Credentials.Expiration },
{"BucketName",bucketName }
};
return result;
}
簽名完成后，安裝阿里云oss sdk
npm install ali-oss;
npm install spark-md5;
<template>
<div >
<div>
<input type="file" @change="fileChange" />
<div>{{ progress }}</div>
</div>
</div>
</template>
#自行匯入包，自行定義變數
async fileChange(e) {
this.file = e.target.files[0];
this.uploadFile(this.file);
},
async uploadFile(file) {
const objectKey = "xxx" + "/file/" + this.file.name;
// 初始化 OSS 客戶端 SDK
await this.initOSSClient();
this.resumeUpload(objectKey, file);
}
# 首先初始化oss 物件
async initOSSClient() {
const res = await axios.get("http://localhost:5152/api/OSS/GetSTSToken");
console.log(res);
const {
AccessKeyId,
AccessKeySecret,
SecurityToken,
BucketName
} = res.data;
this.bucketName = BucketName;
this.client = new OSS({
region: "oss-cn-beijing",
accessKeyId: AccessKeyId,
accessKeySecret: AccessKeySecret,
stsToken: SecurityToken,
bucket: BucketName
});
},
# 斷點上傳
async resumeUpload(objectKey, file) {
//使用SparkMd5計算檔案的md5值
let md5 =await this.calculateFileMD5(file);
let checkpoint = JSON.parse(
window.localStorage.getItem("checkpoint_" + md5)
);
var _this = this;
// 重試五次，
for (let i = 0; i < 5; i++) {
try {
const result = await this.client.multipartUpload(objectKey, file, {
checkpoint,
async progress(percentage, cpt) {
checkpoint = cpt;
_this.progress = parseInt(percentage * 100);
// 將 checkpoint 保存到瀏覽器localstorage 中，
window.localStorage.setItem(
"checkpoint_" + md5,
JSON.stringify(checkpoint)
);
}
});
// 洗掉本地保存的 checkpoint，如果此處不洗掉的話，上傳成功后，用戶無法再次上傳同名檔案
window.localStorage.removeItem("checkpoint_" + md5);
break; // 跳出當前回圈，
} catch (e) {
console.log(e);
}
}
},
// 使用sparkMD5 計算檔案md5
calculateFileMD5(file, chunkSize = 2097152) {
// chunkSize為分塊大小，默認為2MB
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
let currentPosition = 0;
const spark = new SparkMD5.ArrayBuffer();
fileReader.onerror = function() {
reject("檔案讀取失敗！");
};
fileReader.onload = function() {
spark.append(fileReader.result); // 將讀取到的資料添加到MD5計算器中
currentPosition += chunkSize;
if (currentPosition < file.size) {
// 檔案還沒讀完，繼續讀取下一塊
loadNext();
} else {
// 檔案讀取完畢，計算MD5值并回傳結果
const hash = spark.end();
resolve(hash);
}
};
function loadNext() {
const blob = file.slice(currentPosition, currentPosition + chunkSize);
fileReader.readAsArrayBuffer(blob);
}
// 開始讀取第一塊
loadNext();
});
}
如果想自己控制上傳的各步驟可以使用initiateMultipartUpload uploadPart completeMultipartUpload 等方法自行實作各步驟，大致思路就是先initiateMultipartUpload初始化一個分片上傳，回傳uploadid，然后將檔案按一定的大小分片，之后回圈上傳每個分片，完成分片之后呼叫completeMultipartUpload方法合并檔案,這種方式比較復雜，
歡迎交流討論 QQ 1051599574轉載請註明出處，本文鏈接：https://www.uj5u.com/net/547739.html
標籤：.NET Core
下一篇：CSharp讀寫word檔案資料