更新记录
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
];
}
}
}

收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 650
赞赏 0
下载 11270446
赞赏 1866
赞赏
京公网安备:11010802035340号