返回

支付宝小程序直传图片至阿里云OSS探秘

前端

本文针对支付宝小程序直传OSS的实现过程进行了总结和分享,重点介绍了一些踩过的坑,以便读者更好地理解和使用。

支付宝小程序直传图片至阿里云OSS实现指南

1. 准备工作

  • 阿里云OSS账号:如还没有账号,请先注册一个。
  • 阿里云OSS Bucket:在OSS控制台中创建一个Bucket,并获取其名称和访问权限。
  • 阿里云STS临时凭证:使用阿里云SDK或控制台生成STS临时凭证,并获取AccessKeyId、AccessKeySecret和SecurityToken。

2. 代码实现

客户端获取STS临时账号并生成签名

// 导入需要的库
const OSS = require('ali-oss');

// 获取STS临时凭证
const STS = new OSS.STS({
  accessKeyId: '你的AccessKeyId',
  accessKeySecret: '你的AccessKeySecret'
});

// 获取临时凭证
STS.assumeRole('你的RoleName', (err, result) => {
  if (err) {
    // 处理错误
  }

  // 获取AccessKeyId、AccessKeySecret和SecurityToken
  const accessKeyId = result.Credentials.AccessKeyId;
  const accessKeySecret = result.Credentials.AccessKeySecret;
  const securityToken = result.Credentials.SecurityToken;

  // 使用临时凭证生成签名
  const signature = OSS.sign('PUT', accessKeyId, accessKeySecret, securityToken);

  // 使用签名上传图片
  const client = new OSS({
    accessKeyId: accessKeyId,
    accessKeySecret: accessKeySecret,
    stsToken: securityToken,
    bucket: '你的Bucket名称'
  });

  client.put('你的ObjectName', '你的本地文件路径', {
    headers: {
      'Authorization': signature
    }
  }, (err, result) => {
    if (err) {
      // 处理错误
    }

    // 上传成功
  });
});

常见问题

  • 图片无法上传成功

  • 原因1:临时凭证过期

    • 解决方案:重新生成STS临时凭证。
  • 原因2:Bucket策略配置错误

    • 解决方案:检查Bucket策略是否允许上传文件。
  • 原因3:签名错误

    • 解决方案:检查签名是否正确生成。
  • 图片上传成功,但无法访问

  • 原因1:Bucket访问权限配置错误

    • 解决方案:检查Bucket访问权限是否允许公共访问。
  • 原因2:文件没有设置为公共可读

    • 解决方案:在OSS控制台中将文件设置为公共可读。