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 = 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 class="hello">
<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方法合并文件,这种方式比较复杂。
京ICP备14020293号-4