微信小程序：阿里云OSS直传实践-PHP实现服务端签名

1、阿里云OSS上传方式

1.1、Web端Browser.js SDK直传（不推荐）

该方法会将AccessKey ID和AccessKey Secret直接保存在浏览器端，存在极高的风险

1.2、Web端上传服务端再上传至OSS

这种方式上传速度慢

1.3、服务端签名后Web端直传（推荐）

该方式安全性和上传速度都不错，本文采用此方式上传

2、PHP服务端生成签名

本例服务端签名生成代码通过官网给出的示例修改而来，基于ThinkPHP框架

服务端签名直传并设置上传 PHP

使用了第三方库 ramsey/uuid 生成文件名

安装

composer require ramsey/uuid

官网给的示例有callback 参数，如果是前端使用签名直接传OSS是不需要这个参数的

结合官网给的Node.js示例，改造PHP代码

微信小程序直传实践 - 服务端签名

AliOssService.php

<?phpnamespace app\service;use Ramsey\Uuid\Uuid;/*** Class AliOssService* @package app\service** 微信小程序直传实践* @see https://help.aliyun.com/document_detail/92883.html*/
class AliOssService
{// 配置oss参数private const AccessKeyId = '<AccessKeyId>';private const AccessKeySecret = '<AccessKeySecret>';private const Host = 'https://<region>.oss-cn-beijing.aliyuncs.com';// 签名有效期 单位: 秒private const Expire = 3 * 60;// 允许上传的文件最大和最小范围 单位：字节private const ContentLengthMin = 0;private const ContentLengthMax = 20 * 1024 * 1024;/*** 获取服务端签名方式上传参数* @param $params array*   ext string 扩展名 eg: jpg*   dirname string 上传目录 eg: image* @return array* @throws \Exception*/public static function getUploadParams($params){// 接收参数$ext     = $params['ext'];$dirname = $params['dirname'];// 文件路径和文件名$dir = self::getDirname($dirname);$key = $dir . self::getFilename($ext);// 过期时间$expiration = self::getExpireTime(self::Expire);// 参数设置// 附录：Post Policy// https://help.aliyun.com/document_detail/31988.htm#section-d5z-1ww-wdb$policyParams = ['expiration' => $expiration,'conditions' => [// 指定前缀['starts-with', '$key', $dir],// 限制上传文件大小。单位：字节['content-length-range', self::ContentLengthMin, self::ContentLengthMax]]];$policyBase64 = self::getPolicyBase64($policyParams);$signature = self::getSignature($policyBase64, self::AccessKeySecret);return ['accessKeyId' => self::AccessKeyId,'host'        => self::Host,'policy'      => $policyBase64,'signature'   => $signature,'expire'      => $expiration,'key'         => $key,'url'         => self::Host . '/' . $key];}/*** 获取参数base64* @param $policyParams array* @return string*/public static function getPolicyBase64($policyParams){return base64_encode(json_encode($policyParams));}/*** 获取签名* @param $policyBase64 string* @param $accessKeySecret string* @return string*/public static function getSignature($policyBase64, $accessKeySecret){return base64_encode(hash_hmac('sha1', $policyBase64, $accessKeySecret, true));}/*** 获取过期时间* @param $time int 单位: 秒* @return mixed*/public static function getExpireTime($time){return str_replace('+00:00', '.000Z', gmdate('c', time() + $time));}/*** 获取按照月份分隔的文件夹路径* @param $dirname string eg: image/video* @return string eg: image/2022-10/*/public static function getDirname($dirname){return $dirname . '/' . date('Y-m') . '/';}/*** 获取一个随机的文件名* @param $ext string eg: jpg* @return string eg: a4030d9f-c4a2-4f1a-8e33-80e017e572d5.jpg* @throws \Exception*/public static function getFilename($ext){$uuid = Uuid::uuid4()->toString();return $uuid . '.' . $ext;}
}

AliOssController.php

<?phpnamespace app\controller;use app\BaseController;
use app\exception\AppException;
use app\service\AliOssService;class AliOssController extends BaseController
{public function getUploadParams(){$ext     = input('ext');$dirname = input('dirname', 'image');// 参数校验if (!$ext) {throw new AppException('ext is empty');}if (!in_array($dirname, ['image', 'video'], true)) {throw new AppException('dirname: only allow image or video');}$result = AliOssService::getUploadParams(['ext'     => $ext,'dirname' => $dirname,]);return $result;}}

AppException.php

<?phpnamespace app\exception;use Exception;/*** 自定义的业务异常* Class AppException* @package app\exception*/
class AppException extends Exception
{}

3、微信小程序客户端

参考官网给出的示例实现

微信小程序直传实践

思路：

客户端拿到文件名后缀后，传给服务端，获取签名和文件名等必要的上传参数，让更多的工作在服务端完成

oss-upload-file.js

// 获取文件扩展名
function getFilePathExtention(filePath) {return filePath.split('.').slice(-1)[0];
}// 上传到阿里云oss
function uploadFileAsync(config, filePath) {console.log(config);return new Promise((resolve, reject) => {wx.uploadFile({url: config.host, // 开发者服务器的URL。filePath: filePath,name: 'file', // 必须填file。formData: {key: config.key,policy: config.policy,OSSAccessKeyId: config.accessKeyId,signature: config.signature,// 'x-oss-security-token': securityToken // 使用STS签名时必传。},success: (res) => {console.log(res);if (res.statusCode === 204) {resolve();} else {reject('上传失败');}},fail: (err) => {// console.log(err);reject(err);},});});
}// 上传文件
export async function uploadFile(filePath, dirname = 'image') {console.log(filePath);let ext = getFilePathExtention(filePath);// 改方法通过接口获取服务端生成的上传签名    const resParams = await Http.AliOssGetUploadParams({ext,dirname,});//   console.log(resParams.data);//   let objectName = resParams.data.uuid + '.' + getFilePathExtention(filePath);await uploadFileAsync(resParams.data, filePath);//   console.log(res);return resParams;
}

微信小程序：阿里云OSS直传实践-PHP实现服务端签名相关推荐

记录一次微信小程序+阿里云oss的配置步骤和方法
网上的文档搜索了无数,结果还是得靠自己摸索,都讲不到重点,折腾了两天,现在公布出来. 网站防盗链,如果使用了微信小程序的话记得加入防盗链白名单servicewechat.com,宝塔面板直接防盗链设置 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
微信小程序+阿里云+stm32f407的一个项目
** 微信小程序+阿里云+stm32f407的一个项目## 小程序参考了大神半颗心脏的博客和资料, 小程序多个页面推送数据因为自己做小程序是类似商城的一个demo, 其中数据需要与单片机进行交互,而 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
文章目录前言一.功能说明二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接前言案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
微信小程序阿里云服务器非物联网平台自建MQTT代理服务器控制树莓派LED
微信小程序阿里云服务器非物联网平台自建MQTT代理服务器控制树莓派LED 本人大三,临近毕业季,日后希望从事物联网和嵌入式相关工作,所以自己构想了一个项目来练手,之前做大创的时候学了一点微信小程序 ...
微信小程序阿里云服务器https搭建
已更新 2018-11-20 1.什么是https? HTTPS(全称:安全套接字层上的超文本传输协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入SSL层,HTTP ...