微信小程序上传图片和视频到阿里云oss

最近在做小程序项目中涉及到上传多张图片和视频到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 等敏感信息

image.png

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