更新记录

1.0.0（2026-02-28） 下载此版本

初版提交、兼容H5、PC、微信小程序

平台兼容性

uni-app(3.6.17)

其他

han-mobile-wx-file

首先前端我们需要安装腾讯云的直传SDK

如果是微信小程序的请安装

npm i cos-wx-sdk-v5

小程序需要配置腾讯云的request域名

小程序里请求 COS 需要登录到 微信公众平台，选择开发 > 开发设置 > 服务器域名，配置域名白名单。SDK 使用了两个接口： cos.uploadFile 会调用 wx.uploadFile、wx.request。 cos.postObject 会调用 wx.uploadFile。 其他方法会调用 wx.request。 需要在对应白名单里，配置 COS 域名，例如： examplebucket-1250000000.cos.ap-guangzhou.myqcloud.com。 如果上传走的是全球加速域名，需要配置全球加速域名，例如： examplebucket-1250000000.cos.accelerate.myqcloud.com。 如果是H5或web的

npm i cos-js-sdk-v5

后台我使用的是php，下面是php的临时签名示例

<?php

namespace plugin\lfFile\utils;

use QCloud\COSSTS\Sts as cosSts;

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

//缓存时间
private $cache;

const  NO = 1;
const  OK = 0;
public function __construct($config,$cache)
{
    $this->config = $config;
    $this->cache=$cache;
}
/**
 * 获取腾讯云直传配置
 **/
public function getCosConfig(): array
{
    $sts = new cosSts();
    $cosConfig = [
        'url' => 'https://sts.tencentcloudapi.com/', // url和domain保持一致
        'domain' => 'sts.tencentcloudapi.com', // 域名，非必须，默认为 sts.tencentcloudapi.com
        'proxy' => '',
        'secretId' => $this->config['cos_secretId'], // 固定密钥,若为明文密钥，请直接以'xxx'形式填入，不要填写到getenv()函数中
        'secretKey' => $this->config['cos_secretKey'], // 固定密钥,若为明文密钥，请直接以'xxx'形式填入，不要填写到getenv()函数中
        'bucket' => $this->config['cos_bucket'], // 换成你的 bucket
        'region' => $this->config['cos_region'], // 换成 bucket 所在园区
        'durationSeconds' => $this->cache, // 密钥有效期
        'allowPrefix' => ["{$this->config['cos_dirname']}/*"],//允许目录下的文件操作
        'allowActions' => [
            // 简单上传
            'name/cos:PutObject',
            'name/cos:PostObject',
            // 分片上传
            'name/cos:InitiateMultipartUpload',
            'name/cos:ListMultipartUploads',
            'name/cos:ListParts',
            'name/cos:UploadPart',
            'name/cos:CompleteMultipartUpload'
        ],
        'condition' => [

        ],
    ];
    try {
        $tempKeys = $sts->getTempKeys($cosConfig);
    } catch (\Throwable $exception) {
        return ['status' => self::NO, 'msg' => $exception->getMessage(), 'data' => [

        ]];
    }
    return ['status' => self::OK, 'data' => [
        'startTime' => time(),
        'dirname' => $this->config['cos_dirname'],
        'bucket' => $this->config['cos_bucket'],
        'domain_url' => $this->config['cos_domain'],
        'region' => $this->config['cos_region'],
        'file_keys' => $tempKeys,
        'sign' => 'sha1',
    ]];
}

}

直接把上面返回的数据放入前端config即可，前端直接引入插件 success 方法是返回成功的上传文件信息 percent 是上传返回的进度 0-1，需要自行乘100，fail返回上传失败的错误提示

    <han-mobile-wx-file :config="config" @success="success" @percent="percent" @fail="fail">

</han-mobile-wx-file>