微信小程序上传图片到阿里云oss(纯前端)

之前一篇主要写关于vue上传到阿里云服务oss上面,文章地址:vue上传图片到阿里云oss
根据业务需要还需要做小程序端上传,故而也记录一下



1. 准备工作

1.2 小程序后台配置阿里云地址

1.2.1 添加合法域名

小程序后台地址:后台管理地址
步骤:登录小程序后台 → 开发 → 开发管理 → 开发设置 → 服务器域名 → 修改
提示:若使用过程中没有报域名问题第一步,或者调试阶段可忽略,只需要在开发者工具中→ 本地设置→ 勾选不校验合法域名即可


2. 主要方法

上传方法封装:主要也是使用这位大佬:wxapp-ali-oss-use 封装的方法,方法源码感兴趣可以研究下,我主要记录如何使用
官方方法地址:微信小程序上传

3. 使用步骤

3.1 文件改造

可以使用npm方式,由于项目不大,直接复制文件到本地目录来进行调取使用
在这里插入图片描述
对alioss.js文件进行个性化改造
代码示例:

方法的重点主要是在于policy以及Signature值的获取,其他值都可以固定或者自己控制,只有这两个值是需要算法计算出来的

const Base64 = require('./alioss/base64.js');
const Crypto = require('./alioss/crypto.js');

const aliOSS = {
   
   
  accessKeyID: 'aaaaaaaaaaa',
  accessKeySecret: 'bbbbbbbbbbbb',
  host: 'https://ccccccccccc.oss-cn-hangzhou.aliyuncs.com',
  timeout: 87600,
};

export function uploadFile(filePath) {
   
   
  return new Promise(function (resolve, reject) {
   
   

    if (!filePath) {
   
   
      reject({
   
   
        status: false,
        err:'文件错误',
      });
      return;
    }
    const aliyunFileKey = 'cecbImages/' + Date.now() + '-' + Math.floor(Math.random() * 1000) + '.png';
    const policyBase64 = Base64.encode(JSON.stringify({
   
   
      "expiration": new Date(new Date()
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值