微信小程序中图片上传阿里云Oss

本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。

微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下。

第一步:配置阿里云地址:

我们公司是阿里云地址是会改变的,所以需要动态的从后台获取配置

var client = hprose.Client.create(app.globalym, ["get_oss_config"]);
    client.get_oss_config(******, *****).then(function (res) {
      var res = JSON.parse(res);//从后台返回的oss账号数据
      if (res.code == 1) {//判断是否得到
        env = {
          //aliyun OSS config
          uploadImageUrl: 'https://' + res.body.bucket + '.' + res.body.area + '.com', //默认存在根目录,可根据需求改
          AccessKeySecret: res.body.accesskey,
          OSSAccessKeyId: res.body.accessid,
          timeout: 87600 //这个是上传文件时Policy的失效时间
        };
      }
    }, function (err) {
      console.log('请求oss配置失败');
      console.log(err);
    });

主要是这部分。这是配置内容

 env = {
          //aliyun OSS config
          uploadImageUrl: 'https://' + res.body.bucket + '.' + res.body.area + '.com', //默认存在根目录,可根据需求改
          AccessKeySecret: res.body.accesskey,
          OSSAccessKeyId: res.body.accessid,
          timeout: 87600 //这个是上传文件时Policy的失效时间
        };

第二步:引用上传图片的模块

const uploadImage = require('../../utils/uploadAliyun.js');

uploadAliyun.js的内容

const Base64 = require('./Base64.js');
require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');
var env = null
const uploadFile = function (params) {
  env = params.envs
  if (!params.filePath) {
    wx.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', ''); //在手机上检测  注意
  //const aliyunFileKey = params.dir + params.filePath.replace('http://', '');  //在开发者工具里检测  注意

  const aliyunServerURL = env.uploadImageUrl;

  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();

  const signature = getSignature(policyBase64);

  // console.log('aliyunFileKey=', aliyunFileKey);
  // console.log('aliyunServerURL', aliyunServerURL);
  wx.uploadFile({
    url: aliyunServerURL, 
    filePath: params.filePath,
    name: 'file',
    formData: {
      'key': aliyunFileKey,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      '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(aliyunFileKey);
      }
    },
    fail: function (err) {
      err.wxaddinfo = aliyunServerURL;
      if (params.fail) {
        params.fail(err)
      }
    },
  })
}

const getPolicyBase64 = function () {
  let date = new Date();

  date.setHours(date.getHours() + env.timeout);

  let srcT = date.toISOString();

  const policyText = {
    "expiration": srcT, //设置该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;
  // console.log(accesskey)

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

  const signature = Crypto.util.bytesToBase64(bytes);

  return signature;
}

module.exports = uploadFile;

注意如果想在开发者工具里检测上传结果,请使用这段代码

const aliyunFileKey = params.dir + params.filePath.replace('http://', '');  //在开发者工具里检测  注意

在手机上要使用这段代码,不然要报错哦!

const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', ''); //在手机上检测  注意

第三步:在需要上传图片的地方,加上这段代码。

uploadImage({
            filePath: res.tempFilePaths[0],
            dir: "images/",
            success: function (res) {
              console.log(res)
            },
            fail: function (res) {
              console.log("上传失败")
              console.log(res)
            },
            envs: env
          })

第四步:

Base64,js,hmac.js,sha1.js,crypto.js,uploadAliyun.js源码在这里,如果觉得这面文章对你有帮助的话,可给我点个star这里,谢谢!

最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。我也当做笔记记录一下。当然感谢原文对我的帮助,不然我这个小菜鸟怎么解决这个问题呢,哈哈!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值