阿里雲OSS前端web直傳 .net C# .net core

背景

阿里雲oss使用web直接上傳的有兩種方式

1. 是通過阿里雲自己的js sdk上傳, 但是這種上傳方式有個比較麻煩的地方, 獲取授權的時候配置會比較麻煩

2. 通過form表單提交或者post提交, 這種配置會比較簡單一點

無論是哪種大致的思路都是先在後臺通過接口獲取一些參數, 然後在web端發起請求的帶入. 由於這些參數的獲取包含了授權簽名等一系列敏感操作, 所以不建議直接在前端操作, 風險比較大

實現

阿里雲後臺配置允許跨域

在阿里雲oss後臺配置允許post跨域

後端組織前端所需的參數

1. 先通過nuget安裝阿里雲SDK : Aliyun.OSS.SDK, .net core 請安裝 Aliyun.OSS.SDK.NetCore

 2. 編寫接口

        /// <summary>
        /// 獲取阿里雲oss 簽名信息
        /// </summary>
        /// <param name="fileName">文件名</param>
        /// <returns></returns>
        public Dictionary<string, string> GetAliyunOssSignPlicy(string fileName)
        {
            var accessKeyId = "你的Key Id";
            var accessKeySecret ="你的 Key Secret";
            var bucketName = "你的 BucketName";
            var endpoint = "你的Endpoint";
            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 }
            };
            return rt;
        }

3. 前端調用

先通過文件名獲取到上傳所需的參數, 然後通過post上傳

<input id="uploadfile" type="file" />
  <script type="text/javascript">
    document.getElementById("uploadfile").onchange = function () {
      var inputfile = document.getElementById("uploadfile");
      //判斷是否已經選中文件
      if (inputfile.files.length == 0) {
        alert("請選擇你想要上傳的附件！");
        return;
      }
      $.ajax({
        url: '../api/file/GetAliyunOssSignPlicy',
        type: 'post',
        data: { fileName: inputfile.files[0].name },
        success: function (res) {
          var formData = new FormData();
          formData.append("OSSAccessKeyId", res.OSSAccessKeyId);
          formData.append("key", res.key);
          formData.append("policy", res.policy);
          formData.append("Signature", res.Signature);
          formData.append(
            "success_action_status",
            res.success_action_status
          );
          formData.append("file", fl[0]);
          $.ajax({
            url: res.host,
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (upres) {
              console.log('success', upres);
            },
            error: function (uperr) {
              console.log('error', uperr);
            }
          });
        },
        error: function (err) {
          console.log('error', err);
        }
      });
    }
  </script>