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

之前一���主要写关于vue上传到阿里云服务oss上面，文章地址：vue上传图片到阿里云oss

根据业务需要还需要做小程序端上传，故而也记录一下

文章目录

• 1. 准备工作
• • 1.2 小程序后台配置阿里云地址
  • • 1.2.1 添加合法域名
    • 2. 主要方法
    • 3. 使用步骤
    • • 3.1 文件改造
      • 3.2 文件调用
      • 3.3 拓展--canvas签名实现

        ---

        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().getTime() + aliOSS.timeout).toISOString(),      "conditions": [        ["content-length-range", 0, 1024 * 1024 * 10]//10m      ]    }));    let bytes = Crypto.util.HMAC(Crypto.util.SHA1, policyBase64, aliOSS.accessKeySecret, { asBytes: true });    const signature = Crypto.util.bytesToBase64(bytes);    wx.uploadFile({      url: aliOSS.host,      filePath: filePath,      name: 'file',      formData: {        'key': aliyunFileKey,        'OSSAccessKeyId': aliOSS.accessKeyID,        'policy': policyBase64,        'Signature': signature,        'success_action_status': '200',      },      success: function (res) {        resolve({          url:aliOSS.host+'/' + aliyunFileKey        });      },      fail: function (err) {        console.log(err);      },    })  });}

        • accessKeyID与accessKeySecret若纯前端实现的话 就是固定写***的，这个在申请阿里云的时候就会给
        • host 是一个拼接路径 bucket名称+ region地区节点（比如 oss-cn-hangzhou）
        • timeout 超时时间
        • aliyunFileKey 这里是上传的key的参数值，也是存放在oss上面的路径+名称（这里使用了随机数，也可以使用时间戳，只要确保唯一性就可以）

          【注意】 上传后的文件地址：aliOSS.host+‘/’ + aliyunFileKey，该地址也是图片的实际获取地址，需要传给后端保存，以便于后期回显使用

          使用Promise将上传成功之后的地址进行返回

          3.2 文件调用

          项目需要，我使用的图片是通过canvas绘制的，但是调用上是一样的，只需要腾讯对图片的暂存路径传进去即可

          import {uploadFile} from './alioss.js'...uploadImage(){const that = this    wx.canvasToTempFilePath({      canvas: this.data.canvas, // canvas 实例      success(res) {        // canvas 生成图片成功        uploadFile(res.tempFilePath).then(res=>{          console.log(res.url)//图片路径        })      }    })}

          3.3 拓展–canvas签名实现

          .wxml文件：