前端上傳OSS

比較重要的幾個概念

• 存儲空間（Bucket）

  是存儲對象的容器。

• 對象/文件（Object）

  是OSS存儲數據的基本單元。由元信息，用戶數據和文件名（key）組成。對象由存儲空間內部惟一的 Key 來標識。

• 地域（Region）

  OSS 的數據中心所在物理位置。

• 訪問域名（Endpoint）

  OSS 對外服務的訪問域名。

• 訪問密鑰（AccessKey）

  AccessKey（簡稱 AK）指的是訪問身份驗證中用到的 AccessKeyId 和 AccessKeySecret。OSS 經過使用 AccessKeyId 和 AccessKeySecret 對稱加密的方法來驗證某個請求的發送者身份。

如何訪問（外網）

• <Schema>://<Bucket>.<外網Endpoint>/<Object>

eg： https://mybucket.oss-cn-hangz...

• 標籤屬性

<img "src="https://mybucket.oss-cn-hangzhou.aliyuncs.com/folder/logo.png" />

上傳OSS

• install: npm install ali-oss --save

需注意：
Node：Node.js >= 8.0.0 required. You can use 4.x in Node.js < 8.~~~~

Browser：IE >= 10 & Edge ；Major versions of Chrome/Firefox/Safari

• bucket設置：這步須要登陸到oss管理系統配置，設置http請求方式等。
• 官方eg（本地上傳）：

初始化oss

let OSS = require('ali-oss');

let client = new OSS({
  region: '<oss region>',  //例如oss-cn-hangzhou
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
});

上傳

try {
    let result = await client.put('object-name', 'local-file');
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
put();

到這，上傳成功後刷新你的bucket空間就會看到你上傳的文件。

web端上傳

利用 OSS 提供的 PostObject 接口，使用表單上傳方式將文件上傳到 OSS。

• 服務端簽名後直傳

在服務端完成簽名，而後經過表單直傳數據到OSS。

1.獲取文件上傳policy，api:'getUploadPolicy'。
2.上傳配置（可檢查簽名是否過時）

{
  'key' : g_object_name,
  'policy': policyBase64,
  'OSSAccessKeyId': accessid,
  'success_action_status' : '200', //讓服務端返回200,否則，默認會返回204
  'callback' : callbackbody,
  'signature': signature,
  'name': filename,
  'file': file
}

• 使用STS鑑權上傳。

使用STS方式驗證時，要經過STS API獲取STS AccessKeyId、STS AcessKeySecret、SecurityToken。
使用 STS 進行臨時受權： OSS 能夠經過阿里雲 STS (Security Token Service) 進行臨時受權訪問。

1. 獲取token,上傳

fetch('/getToken.json', {  
    method: 'post',   
    mode: 'cors',  
    data: { }  
 })
 .then((res)=>{
    //handle response
    const client = new OSS({
        ...
        stsToken: res.token,
      })
      
      client
        .put(filename, file)
        .then((r) => {
          fn(r)
        })
        .catch(() => {
          err()
        })
      
 });