技術文章 » 阿里雲OSS前端直傳+net core後端簽名

阿里雲OSS前端直傳+net core後端簽名

2023-03-22 15:00:18

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方法合併檔案,這種方式比較複雜。