更新记录

1.0.0(2026-02-28) 下载此版本

前端阿里云直传云存储初步发布、兼容H5、web、微信小程序


平台兼容性

uni-app(3.6.17)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- × × ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - × ×

其他

多语言 暗黑模式 宽屏模式

han-mobile-ali-file

阿里云H5、PC、微信小程序前端直传

前端SDK npm i ali-oss

后端签名方法,我使用的是PHP,注意阿里云的前端直传功能后台签名的AK的ID和AK的密钥必须是子账户申请的

其中 ARN获取方式 在RAM访问控制->角色->角色详情里面的ARN

子账户的AK的ID和密钥获取位置 在RAM访问控制->用户->用户详情里面的AccessKey菜单->创建AccessKey

微信小程序需要把自己的存储桶的域名开放到上传的uploadFile域名

后端的phpSDK

qcloud_sts/qcloud-sts-sdk 其他的SDK请自行前往官网获取

<?php

namespace plugin\lfFile\utils;

use AlibabaCloud\Credentials\Credential; use AlibabaCloud\Dara\Models\RuntimeOptions; use AlibabaCloud\SDK\Sts\V20150401\Models\AssumeRoleRequest; use AlibabaCloud\SDK\Sts\V20150401\Sts; use AlibabaCloud\Tea\Exception\TeaError; use Darabonba\OpenApi\Models\Config;

class OssFile { //上传配置 private array $config;

//缓存时间
private $cache;

const  NO = 1;
const  OK = 0;

public function __construct($config, $cache)
{
    $this->config = $config;
    $this->cache = $cache;
}

/**
 * 使用凭据初始化账号 Client
 * @return Sts Client
 */
private function createClient()
{
    $credential = new Credential();
    $config = new Config([
        "credential" => $credential,
    ]);
    // Endpoint 请参考 https://api.aliyun.com/product/Sts
    $config->endpoint = $this->config['oss_endpoint'];//阿里endpoint请求域名 默认 sts.cn-hangzhou.aliyuncs.com
    $config->accessKeyId = $this->config['oss_accessKeyId'];//阿里的RAM用户组的ak id
    $config->accessKeySecret = $this->config['oss_accessKeySecret']; //阿里的RAM用户组的ak 密钥
    return new Sts($config);
}

//获取阿里云直传配置
public function getOssConfig(): array
{
    $client = $this->createClient();
    $assumeRoleRequest = new AssumeRoleRequest([
        // 1. 设置要扮演的角色ARN (必须)
        "roleArn" => $this->config['oss_role_arn'],//用户角色的ARN名称
        // 2. 设置角色会话名 (必须)
        "roleSessionName" => "web-client-session-" . time(), // 确保唯一性
        // 3. 设置有效期 (强烈建议)
        "durationSeconds" => $this->cache,
        // 4. (可选)设置一个更精细的临时权限策略
        // 此策略会与角色已有策略取交集,进一步限制本次令牌权限
        "policy" => json_encode([
            "Version" => "1",
            "Statement" => [[
                "Effect" => "Allow",
                "Action" => [
                    "oss:PutObject",
                    "oss:GetObject"
                ],
                "Resource" => [
                    "acs:oss:*:*:{$this->config['oss_bucket']}",
                    "acs:oss:*:*:{$this->config['oss_bucket']}/*"
                ]
            ]]
        ])
    ]);
    $runtime = new RuntimeOptions([]);
    try {
        $resp = $client->assumeRoleWithOptions($assumeRoleRequest, $runtime);
        $credentials = $resp->body->credentials;
        // A. 设置过期时间 (比 STS 早 60 秒,UTC 格式)
        $expirationTime = time() + $this->cache - 60;
        $expiration = gmdate('Y-m-d\TH:i:s\Z', $expirationTime);

        // B. 规范化目录前缀 (确保末尾有斜杠,除非为空)
        $rawDir = $this->config['oss_dirname'] ?? '';
        $dirPrefix = ($rawDir !== '' && substr($rawDir, -1) !== '/') ? $rawDir . '/' : $rawDir;
        // C. 构造 Policy 数组 (V2 标准格式)
        $policyArray = [
            "expiration" => $expiration,
            "conditions" => [
                // 条件 1: 限制 Bucket
                ["bucket" => $this->config['oss_bucket']],
                // 条件 2: 限制文件路径前缀 (防止乱传)
                // 格式必须是: ["starts-with", "$key", "前缀"]
                ["starts-with", '$key', $dirPrefix],
                // 条件 3: 强制返回 200 (适配微信小程序)
                ["eq", '$success_action_status', "200"]
            ]
        ];
        // D. 转为 JSON 并 Base64 编码
        $policyJson = json_encode($policyArray,JSON_UNESCAPED_SLASHES);
        $policyBase64 = base64_encode($policyJson);

        // E. 计算 Signature (HMAC-SHA1)
        // 公式: Base64(HMAC-SHA1(临时AccessKeySecret, Base64_Policy))
        // 注意:必须使用 $credentials->accessKeySecret (临时密钥)
        $signatureBase64 = base64_encode(hash_hmac('sha1', $policyBase64, $credentials->accessKeySecret, true));

        // 组装前端Browser.js需要的格式
        $stsToken = [
            'AccessKeyId' => $credentials->accessKeyId,
            'AccessKeySecret' => $credentials->accessKeySecret,
            'SecurityToken' => $credentials->securityToken,
            'Expiration' => $credentials->expiration,
            'bucket' => $this->config['oss_bucket'],//存储桶名称
            'domain_url' => $this->config['oss_domain'],//访问域名
            'dirname' => $this->config['oss_dirname'],//存储前缀
            'region' => $this->config['oss_region'],//存储桶所在地区
            'policy' => $policyBase64,
            'signature' => $signatureBase64
        ];
        return [
            'status' => self::OK,
            'data' => $stsToken
        ];
    } catch (\Throwable $error) {
        if (!($error instanceof TeaError)) {
            $error = new TeaError([], $error->getMessage(), $error->getCode(), $error);
        }
        return [
            'status' => self::NO,
            'data' => [],
            'msg' => $error->message
        ];
    }

}

}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

如果使用微信小程序需要在用户隐私协议勾选相册权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。