微信小程序调用oss上传至阿里云
发布于 4 年前 作者 cduan 1844 次浏览 来自 分享
1.首先创建oss密钥 这里我新建了一个名字 命名为config.js
var fileHost = "https://*****************/"; //你的阿里云地址最后面跟上一个/   在你当前小程序的后台的uploadFile 合法域名也要配上这个域名
var config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`, // 默认存在根目录,可根据需求改
  AccessKeySecret: '*******', // AccessKeySecret 去你的阿里云上控制台上找
  OSSAccessKeyId: '********', // AccessKeyId 去你的阿里云上控制台上找
  timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

2.创建上传配置文件 我这里命名为upload.js
const env = require('config.js'); //配置文件,在这文件里配置你的OSS keyId和KeySecret,timeout:87600;
// 以下算法可以自行在百度搜索 复制到同upload.js目录下即可
const base64 = require('base64.js');//Base64,hmac,sha1,crypto相关算法
require('hmac.js');
require('sha1.js');
const Crypto = require('crypto.js');

/*
 *上传文件到阿里云oss
 *[@param](/user/param) - filePath :图片的本地资源路径
 *[@param](/user/param) - dir:表示要传到哪个目录下
 *[@param](/user/param) - successc:成功回调
 *[@param](/user/param) - failc:失败回调
 */ 
const uploadFile = function (filePath, dir, successc, failc) {
  if (!filePath || filePath.length < 9) {
    wx.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  
  console.log('上传图片.....');
  //图片名字 可以自行定义,     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
  console.log(dir)
  const aliyunFileKey = dir+ new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
  
  const aliyunServerURL = env.uploadImageUrl;//OSS地址,需要https
  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64);//获取签名
 console.log(env)
  wx.uploadFile({
    url: aliyunServerURL,//开发者服务器 url
    filePath: filePath,//要上传文件资源的路径
    name: 'file',//必须填file
    formData: {
      'key': aliyunFileKey,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'signature': signature,
      'success_action_status': '200',
    },
    success: function (res) {
      console.log(res)
      if (res.statusCode != 200) {
        failc(new Error('上传错误:' + JSON.stringify(res)))
        return;
      }
      successc(aliyunServerURL+aliyunFileKey);
    },
    fail: function (err) {
      err.wxaddinfo = aliyunServerURL;
      failc(err);
    },
  })
}

const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.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) {
  const accesskey = env.AccessKeySecret;

  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
    asBytes: true
  });
  const signature = Crypto.util.bytesToBase64(bytes);

  return signature;
}

module.exports = uploadFile;

3.小程序页面调用的时候
const uploadImage = require('../../utils/upload');
/**
   * 上传图片
   */
  uploadImage() {
    let that = this;
    let applyRefundImgList = that.data.applyRefundImgList
    wx.chooseImage({
      count: 5 - applyRefundImgList.length, //处理图片上传数量 (可根据自身需求配置)
      success: function(res) {
        wx.showLoading({
          title: '上传中',
          mask: true
        })
        for (let index = 0; index < res.tempFilePaths.length; index++) {
          //applyrefund 则为bucket下的文件夹路径 可根据自身需求进行分类
          uploadImage(res.tempFilePaths[index], `applyrefund/${shopUuid}/`,
            function(res) {
              wx.hideLoading()
              applyRefundImgList.push(res)
              that.setData({
                applyRefundImgList
              })
            },
            function(res) {
              wx.hideLoading()
            }
          )
        }
      }
    })
  },
2 回复

最好还是由服务端生成签名去使用吧

回到顶部