在微信小程序中使用阿里OSS(ali-oss)接口上傳圖片至阿里雲對象存儲(OSS)

一.前言

目前在微信小程序中,不少npm包都有兼容性問題,在前幾天編碼過程當中遇到了阿里OSS的npm包兼容問題,試了npm以及靜態資源sdk直接引用的方法都出現了問題,因此花時間實現了阿里OSS的自簽名算法,直接使用API上傳文件到OSS

二.具體實現

上圖是阿里雲OSS官方的自簽名算法

三.直接上代碼

1. config.js

var fileHost = "https://xxxxxxx.oss-cn-xxxxxxx.aliyuncs.com"
var config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`, // 上傳的文件夾 
  AccessKeySecret: 'AccessKeySecret',
  OSSAccessKeyId: 'OSSAccessKeyId',
  timeout: 87600 // 文件失效時間
};
module.exports = config
複製代碼

2. upload.js

const env = require('./config.js');

const Base64 = require('./Base64.js');

require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');


const upload = function (params) {
  if (!params.filePath || params.filePath.length < 9) {
    wx.showModal({
      title: '圖片錯誤',
      content: '請檢查圖片路徑和格式',
      showCancel: false,
    })
    return;
  }
  // 解決真機和開發工具的兼容問題
  const filePath = params.dir + (params.filePath.indexOf('http://tmp') > -1 ? params.filePath.replace('http://tmp', '') : params.filePath.replace('wxfile://tmp_', '/'))

  const uploadUrl = env.uploadImageUrl;
  const accessKeyId = env.OSSAccessKeyId;
  const policy = getPolicy();
  const signature = getSignature(policy);

  wx.uploadFile({
    url: uploadUrl,
    filePath: params.filePath,
    name: 'file',
    formData: {
      'key': filePath, // 服務利用key找到文件
      'policy': policy,
      'OSSAccessKeyId': accessKeyId,
      'signature': signature,
      'success_action_status': '200',
    },
    success: function (res) {
      if (res.statusCode != 200) {
        if (params.fail) {
          params.fail(res)
        }
        return;
      }
      if (params.success) {
        params.success(filePath);
      }
    },
    fail: function (err) {
      err.wxaddinfo = uploadUrl;
      if (params.fail) {
        params.fail(err)
      }
    },
  })
}

const getPolicy = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.timeout);
  let expire = date.toISOString();
  const policy = {
    "expiration": expire, // 設置該Policy的失效時間
    "conditions": [
      ["content-length-range", 0, 3 * 1024 * 1024] // 設置上傳文件的大小限制
    ]
  };

  return Base64.encode(JSON.stringify(policy));
}

const getSignature = function (policyBase64) {
  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, env.AccessKeySecret, {
    asBytes: true
  });
  return Crypto.util.bytesToBase64(bytes);
}

module.exports = upload;
複製代碼

3. index.js (使用)

const AliOssUpload = require('../../utils/signature/AliOSSUpload.js');

// 小程序JS
Page({
    onLoad() {
        AliOssUpload({
            filePath: res.tempFilePaths[0],
            dir: 'chatImg',
            success(e) {
                console.log(e)
            }
        })
    }
})
複製代碼

須要 crypto.js, hmac.js, sha1.js, Base64.js 的能夠去個人Github裏拿,別忘了給個Star啊~

四.收尾

若是有更好的解決方案能夠私信我或者評論~ 也能夠加QQ羣 623469960 交流問題