Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS

阿里云对象存储 OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务。本实例微信小程序直传文件参考官方文档:https://help.aliyun.com/zh/oss/use-cases/use-wechat-mini-prog...,使用STS临时访问凭证访问OSS官方文档:https://www.alibabacloud.com/help/zh/oss/developer-reference/...,另外使用STS进行临时授权之PHP授权访问参考官方文档:https://help.aliyun.com/zh/oss/developer-reference/authorize-...。使用STS授权用户直接访问OSS的流程如下:
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第1张图片
开通阿里云OSS开通阿里云oss试用版:https://free.aliyun.com/?pipCode=oss&spm=5176.7933691.J_52537...
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第2张图片
创建存储空间Bucket存储空间(Bucket)是用于存储对象(Object)的容器
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第3张图片
创建Bucket存储目录文件列表新建test目录作为图片存放位置
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第4张图片
获取Bucket名称和Bucket域名点击浏览进入Bucket基本信息,保存存储空间名称、Endpoint地域节点、Bucket域名
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第5张图片
创建RAM用户与角色云账号 AccessKey 是您访问阿里云 API 的密钥,具有账户的完全权限,使用 RAM 用户(而不是云账号)的 AccessKey 进行 API 调用
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第6张图片
获取AccessKey ID和AccessKey Secret
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第7张图片
为RAM用户添加权限:AliyunOSSFullAccess、AliyunSTSAssumeRoleAccess,在左侧搜索框输入AliyunOSSFullAccess与AliyunSTSAssumeRoleAccess进行添加,然后点确定进行保存。
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第8张图片
创建角色:第一步选择阿里云账号
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第9张图片
第二步配置角色
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第10张图片
创建完成之后点击“为角色授权”
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第11张图片
还是添加AliyunOSSFullAccess、AliyunSTSAssumeRoleAccess权限,在左侧搜索框输入AliyunOSSFullAccess与AliyunSTSAssumeRoleAccess进行添加,然后点确定进行保存。
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第12张图片
获取角色ARN
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第13张图片
为角色授予上传文件的权限在创建权限策略页面,单击脚本编辑,然后在策略文档输入框中赋予角色向目标存储空间examplebucket下的目录上传文件的权限。具体配置示例如下。
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第14张图片

Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第15张图片
创建Bucket授权策略
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第16张图片
配置Bucket跨域访问客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin头的请求消息。OSS对带有Origin头的请求消息会进行跨域规则(CORS)的验证。因此需要为Bucket设置跨域规则以支持Post方法。
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第17张图片
微信小程序配置域名白名单为微信小程序配置域名白名单,以实现微信小程序和OSS Bucket之间的正常通信。登录微信小程序平台,将上传和下载的合法域名填写为Bucket的外网访问域名。
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第18张图片
服务端生成签名使用服务端签名时,需要先搭建一个签名服务,然后由客户端调用签名服务生成签名。本例使用Thinkphp6生成签名。首先安装thinkphp6:


C:\phpstudy_pro\WWW> composer create-project topthink/think tp

使用composer require alibabacloud/sts-20150401命令安装STS依赖,使用composer require alibabacloud/sdk命令安装PHP SDK依赖。


C:\phpstudy_pro\WWW>tp> composer require alibabacloud/sts-20150401
C:\phpstudy_pro\WWW>tp> composer require alibabacloud/sdk

创建生成签名控制器api.php、配置文件upload.php
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第19张图片
upload.php文件配置阿里云oss参数


 '0',
'oss_ak' => '',//阿里云AccessKeyId   
'oss_sk' => '',//阿里云AccessKeySecret'
'oss_host' => '',//阿里云Bucket 域名
'oss_endpoint' => 'oss-cn-hangzhou.aliyuncs.com',//阿里云 Endpoint(地域节点)
'oss_bucket' => '',//bucket名称
'oss_role_arn' => '',  // 角色访问控制RoleArn
'oss_role_session_name' => 'stahangdeng', // 临时凭证名称,随意
];

后端代码实现

ak) && $this->ak = Config::get('upload.oss_ak');
        empty($this->sk) &&  $this->sk = Config::get('upload.oss_sk');
        empty($this->host) &&  $this->host = Config::get('upload.oss_host');
        empty($this->bucket) &&  $this->bucket = Config::get('upload.oss_bucket');
        empty($this->endpoint) &&  $this->endpoint = Config::get('upload.oss_endpoint');
        empty($this->roleArn) &&  $this->roleArn = Config::get('upload.oss_role_arn');
        empty($this->roleSessionName) &&  $this->roleSessionName = Config::get('upload.oss_role_session_name');
    }

    /**
     * 阿里云Sts凭证
     */
    public function getStsToken()
{
        AlibabaCloud::accessKeyClient($this->ak, $this->sk)
            ->regionId('cn-hangzhou')
            ->asDefaultClient();

        try {
            $result = AlibabaCloud::rpc()
                ->product('Sts')
                ->scheme('https') // https | http
                ->version('2015-04-01')
                ->action('AssumeRole')
                ->method('POST')
                ->host('sts.aliyuncs.com')
                ->options([
                    'query' => [
                        'RegionId' => "cn-hangzhou",
                        'RoleArn' => $this->roleArn,
                        'RoleSessionName' => $this->roleSessionName,
                    ],
                ])
                ->request();
                
            $resultObj = $result->toArray();
            $credentials = $resultObj['Credentials'];
            $credentials['host'] = $this->host;
            return json($credentials);
        } catch (ClientException $e) {
            return error($e->getErrorMessage());
        } catch (ServerException $e) {
            return error($e->getErrorMessage());
        }
    }

uniapp搭建小程序创建项目
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第20张图片
把项目运行到微信开发者工具
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第21张图片
运行到小程序模拟器
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第22张图片

Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第23张图片
安装crypto-js和base64-js执行以下命令安装js


C:\phpstudy_pro\WWW\wx-uniapp> npm install crypto-js
C:\phpstudy_pro\WWW\wx-uniapp> npm install js-base64

引入js


import crypto from 'crypto-js';
import { Base64 } from 'js-base64';

前端代码实现

在wx-uniapp\pages\index\index.vue文件添加以下代码





上传图片前端微信小程序开发工具点击图片上传,图片上传成功返回code204
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第24张图片
Bucket文件列表显示上传图片成功
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第25张图片
点击图片详情,图片正常显示
Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS_第26张图片
到此微信小程序上传图片到阿里云oss成功

你可能感兴趣的:(Thinkphp6+Uniapp+微信小程序上传图片到阿里云OSS)