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

一、配置Bucket跨域访问

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

登录阿里云OSS管理控制台
单击Bucket列表，然后单击目标Bucket名称
在左侧导航栏，选择权限管理 > 跨域设置，然后在跨域设置区域，单击设置
单击创建规则，配置如下图所示

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

注册登录腾讯云账户
创建云函数

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文件上传、下载，云函数）

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

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

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

ost：填写存储空间的访问域名，我们刚刚在微信公众平台上填写过的
signature：我们需要在云函数的返回值中获取到的signature信息
policy：填写在云函数的返回值中获取到的policy信息
ossAccessKeyId：填写您的AccessKey ID
key：设置文件上传至OSS后的文件路径
securityToken：若使用STS认证，此项填写中，使用客户端签名在云函数的返回值获取到的SecurityToken 我们此处不需要

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',})})},