对象存储OSS（微信小程序直传实践）

对象存储OSS（微信小程序直传实践）

一、配置Bucket跨域访问

客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。

1. 登录阿里云OSS管理控制台

2. 单击Bucket列表，然后单击目标Bucket名称

3. 在左侧导航栏，选择权限管理 > 跨域设置，然后在跨域设置区域，单击设置

4. 单击创建规则，配置如下图所示

二、腾讯云创建云函数（Nodejs）

1. 注册登录腾讯云账户

2. 创建云函数

3.在云函数中部署签名服务，uploadOssHelper.js

const crypto = require("crypto-js");

class MpUploadOssHelper {
  constructor(options) {
    this.accessKeyId = options.accessKeyId;
    this.accessKeySecret = options.accessKeySecret;
    // 限制参数的生效时间，单位为小时，默认值为1。
    this.timeout = options.timeout || 1; 
    // 限制上传文件的大小，单位为MB，默认值为10。
    this.maxSize = options.maxSize || 10;
  }

  createUploadParams() {
    const policy = this.getPolicyBase64();
    const signature = this.signature(policy);
    return {
      OSSAccessKeyId: this.accessKeyId,
      policy: policy,
      signature: signature,
    };
  }

  getPolicyBase64() {
    let date = new Date();
    // 设置policy过期时间。
    date.setHours(date.getHours() + this.timeout);
    let srcT = date.toISOString();
    const policyText = {
      expiration: srcT,
      conditions: [
        // 限制上传文件大小。
        ["content-length-range", 0, this.maxSize * 1024 * 1024],
      ],
    };
    const buffer = Buffer.from(JSON.stringify(policyText));
    return buffer.toString("base64");
  }

  signature(policy) {
    return crypto.enc.Base64.stringify(
      crypto.HmacSHA1(policy, this.accessKeySecret)
    );
  }
}

module.exports = MpUploadOssHelper;

4.服务端请求接口

这里accessKeyId: ‘’,accessKeySecret: ''为阿里云申请

timeout 为限制参数的生效时间 默认时间为小时

maxSize 为每次上传至oss图片大小限制 默认为10MB

const express = require('express');
const app = express();
const MpUploadOssHelper = require("./uploadOssHelper.js");


app.get('/getPostObjectParams', (req, res) => {
  const mpHelper = new MpUploadOssHelper({
    accessKeyId: '<Your AccessKeyId>',
    accessKeySecret: '<Your AccessKeySecret>',
    // 限制参数的生效时间，单位为小时，默认值为1。
    timeout: 1,
    // 限制上传文件大小，单位为MB，默认值为10。
    maxSize: 10, 
  });

  // 生成参数。
  const params = mpHelper.createUploadParams();

  res.json(params);
})

5.部署完成

三、微信公众平台为所注册的小程序绑定域名（oss文件上传、下载，云函数）

1. 进入微信公众平台后，开始配置域名
2. oss域名在存储空间概览页的访问域名区域查看Bucket域名

四、小程序端开始上传图片

我这里使用的是Vant组件，（先以一张图片为例）点击上传图片，那么我们就可以获取到本张图片的上传路径，那么我们只需要将上传图片的路径对应到我们上传文件接口uploadFile接口下的filePath中，就可以上传文件，那么要想上传到我们的oss中，我们需要准备

1. ost：填写存储空间的访问域名，我们刚刚在微信公众平台上填写过的

2. signature：我们需要在云函数的返回值中获取到的signature信息

3. policy：填写在云函数的返回值中获取到的policy信息

4. ossAccessKeyId：填写您的AccessKey ID

5. key：设置文件上传至OSS后的文件路径

6. securityToken：若使用STS认证，此项填写中，使用客户端签名在云函数的返回值获取到的SecurityToken 我们此处不需要

7. filePath：填写待上传文件的文件路径

   const host = '<host>';
   const signature = '<signatureString>';
   const ossAccessKeyId = '<accessKey>';
   const policy = '<policyBase64Str>';
   const key = '<object name>';
   const securityToken = '<x-oss-security-token>'; 
   const filePath = '<filePath>'; // 待上传文件的文件路径。
   wx.uploadFile({
     url: host, // 开发者服务器的URL。
     filePath: filePath,
     name: 'file', // 必须填file。
     formData: {
       key,
       policy,
       OSSAccessKeyId: ossAccessKeyId,
       signature,
       // 'x-oss-security-token': securityToken // 使用STS签名时必传。
     },
     success: (res) => {
       if (res.statusCode === 204) {
         console.log('上传成功');
       }
     },
     fail: err => {
       console.log(err);
     }
   });
   

   五、读取oss中的图片

   这一步操作其实很简单，我们上传的图片路径为：我们在upload、downLoad配置的域名 + 我们上面设置的文件路径key值

   附加：Promise异步操作

   根据以上步骤我们就可以完成单张图片的上传，那么如果我们需要一次上传多张图片该怎么办呢？以小程序为例

   1、创建以文件路径和key值为参数的函数，用于将单张图片上传

   2、获取所需要上传的文件列表 fileList

   3、定义上传的promise任务栈 uploadPromiseTask

   4、通过for循环push进每一张所需要的上传的图片promise栈

   5、代码如下

   afterRead(event) {
           //console.log(this.data.fileList)
           wx.showLoading({
               title: '上传中...'
           })
           const { fileList } = this.data //获取所需要上传的文件列表
           let uploadPromiseTask = [] //定义上传的promise任务栈
           for (let i = 0; i < fileList.length; i++) {
               uploadPromiseTask.push(this.AI(fileList[i].url)) //push进每一张所需要的上传的图片promise栈
           }
           Promise.all(uploadPromiseTask).then(res => {
               //全部上传完毕
               this.topicSubmit()
               wx.hideLoading()
           }).catch(error => {
               //存在有上传失败的文件
               wx.hideLoading()
               wx.showToast({
                   title: '上传失败！',
                   icon: 'none',
               })
           })
       },
        {
               //存在有上传失败的文件
               wx.hideLoading()
               wx.showToast({
                   title: '上传失败！',
                   icon: 'none',
               })
           })
       },