前端上传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()
        })
      
 });