对象存储OSS（微信小程序直传实践）-Toy模板网

这篇具有很好参考价值的文章主要介绍了对象存储OSS（微信小程序直传实践）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、配置Bucket跨域访问

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

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

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

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

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

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

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域名

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

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

我这里使用的是Vant组件，（先以一张图片为例）点击上传图片，那么我们就可以获取到本张图片的上传路径，那么我们只需要将上传图片的路径对应到我们上传文件接口uploadFile接口下的filePath中，就可以上传文件，那么要想上传到我们的oss中，我们需要准备
对象存储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、代码如下文章来源地址https://www.toymoban.com/news/detail-513728.html

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

到了这里，关于对象存储OSS（微信小程序直传实践）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！