前端上传OSS

比较重要的几个概念
  • 存储空间(Bucket)

    是存储对象的容器。

  • 对象/文件(Object)

    是OSS存储数据的基本单元。由元信息,用户数据和文件名(key)组成。对象由存储空间内部唯一的 Key 来标识。

  • 地域(Region)

    OSS 的数据中心所在物理位置。

  • 访问域名(Endpoint)

    OSS 对外服务的访问域名。

  • 访问密钥(AccessKey)

    AccessKey(简称 AK)指的是访问身份验证中用到的 AccessKeyId 和 AccessKeySecret。OSS 通过使用 AccessKeyId 和 AccessKeySecret 对称加密的方法来验证某个请求的发送者身份。

如何访问(外网)
  • ://.<外网Endpoint>/

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

    • 标签属性

    上传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-cn-hangzhou
      accessKeyId: '',
      accessKeySecret: '',
      bucket: ''
    });

    上传

      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。

    前端上传OSS_第1张图片

    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鉴权上传。

    前端上传OSS_第2张图片

    使用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()
            })
          
     });

    你可能感兴趣的:(前端)