最近在做小程序项目中涉及到上传多张图片和视频到oss的功能,这里做一个详细总结
一、从官方文档可以看出分为以下4个步骤( 参考官方文档)
步骤1. 配置Bucket跨域访问
步骤2. 微信小程序配置域名白名单
步骤3:获取签名
步骤4:使用微信小程序上传
步骤1、2官方文档说的比较仔细就不详细赘述,这里重点说下步骤3、4
首先我们先看看步骤4,以下可以看出oss上传比常规上传多传了一个formData对象,所以我们的目的就是拿到组成formData所需参数
wx.uploadFile({
url: host, // 填写存储空间的访问域名,例如https://test.oss-cn-zhangjiakou.aliyuncs.com
filePath: tempFilePath ,//待上传的本地资源路径(wx.chooseMedia获取到的临时路径)
name: 'file', // 必须填file。
formData: {
key,//存放图片命名格式 ,自定义不重复就行
policy,//包含失效时间和文件上传大小限制等信息
OSSAccessKeyId, //AccessKey ID用于标识用户(后台接口提供)
signature,//accessKeySecret加密秘钥(后台接口提供)
'x-oss-security-token': securityToken // 使用STS签名时必传(后台接口提供)
},
success: (res) => {
if (res.statusCode === 204) {
console.log('上传成功');
}
},
fail: err => {
console.log(err);
}
});
1.获取key
const key= path + new Date().getTime() + tempFilePath.split("tmp/")[1]; //存放图片命名格式
//时间戳+ tempFilePath(wx.chooseMedia获取到的临时路径)组成非重复的命名格式就行
2.获取policy
const env = require('config.js');
const base64 = require('base64.js');
const getPolicyBase64= function() {
let date = new Date();
date.setHours(date.getHours() + env.timeout);
let srcT = date.toISOString();
const policyText = {
"expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0,1* 1024 * 1024 * 1024] // 设置上传文件的大小限制1G
]
};
const policyBase64 = base64.encode(JSON.stringify(policyText));
return policyBase64;
}
3.获取OSSAccessKeyId 、accessKeySecret、securityToken
后台接口返回
服务端搭建一个STS服务,之后由客户端获取STS临时授权账号并生成签名。
调用后台接口统一返回OSSAccessKeyId、accessKeySecret、securityToken 等敏感信息
4.获取signature
//传参:步骤2生成的policy 后台返回:accessKeySecret
const Crypto = require('crypto.js');
const getSignature = function(policyBase64,accessKeySecret) {
const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accessKeySecret, {
asBytes: true
});
const signature = Crypto.util.bytesToBase64(bytes);
return signature;
}
点击下载github项目,修改成你项目中配置 (如果觉得本文对你有所帮助,就star一下吧~)
参考文档:
官方文档
微信小程序上传文件(图片)到阿里云OSS