微信小程序上传文件到阿里云OSS的代码

备注:我是使用STS临时授权方式,则需要指定该项为SecurityToken的值,在formData中设置‘x-oss-security-token’,要不然会403报错

uploadAliyun.ts

import ‘./hmac.js‘;
import ‘./sha1.js‘;
import Base64 from ‘./Base64‘; //Base64,hmac,sha1,crypto相关算法
//参考这里https://github.com/peterhuang007/weixinFileToaliyun.git
import Crypto from ‘./crypto.js‘;

const clint = {
  rootDir: ‘‘, //默认存在根目录,可根据需求改
  accessKeyId: ‘‘,
  accessKeySecret: ‘‘,
  stsToken: ‘‘,
  timeout: 87600, //这个是上传文件时Policy的失效时间
};

export const uploadFile = (
  env: any,
  options: {
    file: any;
    dir: string;
    failCallback?: (arg0: Error) => void;
    successCallback?: (arg0: any) => void;
  }
) => {
  clint.rootDir = `https://${env.bucket}.${env.endpoint}`; //默认存在根目录,可根据需求改
  clint.accessKeyId = env.accessKeyId;
  clint.accessKeySecret = env.accessKeySecret;
  clint.stsToken = env.stsToken;

  if (!options.file.path || options.file.path.length < 9) {
    wx.showModal({
      title: ‘图片错误‘,
      content: ‘请重试‘,
      showCancel: false,
    });
    return;
  }

  let timestamp = new Date().getTime(); // 返回数值单位是毫秒
  const fileUrl = `${options.dir}/${timestamp}_${options.file.name}`; // dir表示要传到这个目录下
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64); //获取签名
  wx.uploadFile({
    url: clint.rootDir,
    filePath: options.file.path,
    name: ‘file‘, //必须填file
    formData: {
      key: fileUrl,
      policy: policyBase64,
      signature: signature,
      OSSAccessKeyId: clint.accessKeyId,
      ‘x-oss-security-token‘: clint.stsToken, // 访问是使用STS临时授权,则需要指定该项为SecurityToken的值
      success_action_status: ‘200‘,
    },
    success: function (res) {
      if (res.statusCode != 200) {
        typeof options.failCallback === ‘function‘ &&
          options.failCallback(new Error(‘上传错误:‘ + JSON.stringify(res)));
        return;
      }
      // console.log(‘上传图片成功‘, res);
      typeof options.successCallback === ‘function‘ &&
        options.successCallback(res);
    },
    fail: function (err) {
      typeof options.failCallback === ‘function‘ && options.failCallback(err);
    },
  });
};

const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + clint.timeout);
  let srcT = date.toISOString();
  const policyText = {
    expiration: srcT, // 设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
    conditions: [
      [‘content-length-range‘, 0, 5 * 1024 * 1024], // 设置上传文件的大小限制,5mb
    ],
  };
  const policyBase64 = Base64.encode(JSON.stringify(policyText));
  return policyBase64;
};

const getSignature = function (policyBase64: any) {
  const accessKey = clint.accessKeySecret;
  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accessKey, {
    asBytes: true,
  });
  const signature = Crypto.util.bytesToBase64(bytes);
  return signature;
};

页面中调用

questions({
    method: ‘POST‘,
    data: this.form,
}).then((res: any) = > {
    for (let file of this.fileUpload) {
        uploadFile(this.OssSign, {
            file: file,
            dir: ‘iot‘,
            successCallback(res) {
                // console.log(res);
            },
        });
    }
    wx.switchTab({
        url: ‘/pages/question/index/main‘,
    });
});

 

参考链接:https://www.jianshu.com/p/34d6dcbdc2e5

官方文档:https://help.aliyun.com/document_detail/31988.html?spm=5176.11065259.1996646101.searchclickresult.3ec33901vFANUq

微信小程序上传文件到阿里云OSS的代码

上一篇:微信小程序 隐藏导航栏


下一篇:小程序锚点使用过程