技术创作专家 - UNIAPP 小程序直传阿里云对象存储使用 STS Token

前端

2023-12-03 08:21:05

前言

随着互联网的快速发展，越来越多的企业和个人开始使用云存储来存储数据。阿里云对象存储（OSS）是阿里云推出的云存储服务，具有安全、稳定、低成本等特点。因此，越来越多的开发者开始使用阿里云 OSS 来存储数据。

但是，当我们使用小程序上传数据到阿里云 OSS 时，会遇到一个问题，那就是小程序无法直接访问阿里云 OSS。这是因为小程序是一个前端框架，而阿里云 OSS 是一个后端服务。为了解决这个问题，我们需要使用 STS Token（临时授权）。

STS Token 是阿里云颁发的临时安全令牌，它可以授权小程序临时访问阿里云 OSS。使用 STS Token，我们可以轻松地将小程序中的数据上传到阿里云 OSS。

使用 STS Token 实现小程序直传阿里云对象存储

1. 获取 STS Token

首先，我们需要获取 STS Token。我们可以使用阿里云提供的 SDK 来获取 STS Token。获取 STS Token 的代码如下：

import STS from 'aliyun-oss-sdk';

const client = new STS({
  accessKeyId: 'your access key id',
  accessKeySecret: 'your access key secret'
});

const policy = {
  Version: '1',
  Statement: [
    {
      Action: ['oss:PutObject'],
      Resource: ['acs:oss:*:*:*'],
      Effect: 'Allow'
    }
  ]
};

const params = {
  RoleArn: 'your role arn',
  Policy: JSON.stringify(policy),
  DurationSeconds: 3600
};

client.getFederationToken(params, (err, data) => {
  if (err) {
    console.error(err);
    return;
  }

  console.log(data);
});

2. 使用 STS Token 上传数据

获取到 STS Token 后，我们就可以使用 STS Token 上传数据了。我们可以使用阿里云提供的 SDK 来上传数据。上传数据的代码如下：

import OSS from 'aliyun-oss-sdk';

const client = new OSS({
  accessKeyId: data.Credentials.AccessKeyId,
  accessKeySecret: data.Credentials.AccessKeySecret,
  stsToken: data.Credentials.SecurityToken
});

const bucket = client.bucket('your bucket name');

const file = await bucket.put('your file name', 'your file content');

console.log(file.url);

图片上传前添加水印文字

在某些情况下，我们需要在图片上传前添加水印文字。我们可以使用阿里云提供的 SDK 来添加水印文字。添加水印文字的代码如下：

import OSS from 'aliyun-oss-sdk';

const client = new OSS({
  accessKeyId: data.Credentials.AccessKeyId,
  accessKeySecret: data.Credentials.AccessKeySecret,
  stsToken: data.Credentials.SecurityToken
});

const bucket = client.bucket('your bucket name');

const file = await bucket.put('your file name', 'your file content', {
  headers: {
    'x-oss-process': 'image/watermark,text_20pt_Arial_50pc_0,0,0'
  }
});

console.log(file.url);