评论

微信小程序调用oss上传至阿里云

微信小程序调用oss上传至阿里云

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;
// 以下算法在https://gitee.com/chenkuo1997/oss-wx.git 复制到同upload.js目录下即可
const base64 = require('base64.js');//Base64,hmac,sha1,crypto相关算法
require('hmac.js');
require('sha1.js');
const Crypto = require('crypto.js');


/*
 *上传文件到阿里云oss
 *@param - filePath :图片的本地资源路径
 *@param - dir:表示要传到哪个目录下
 *@param - successc:成功回调
 *@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()
            }
          )
        }
      }
    })
  },
最后一次编辑于  2021-07-06  
点赞 7
收藏
评论

20 个评论

  • 樂你李
    樂你李
    2021-04-16
    你好,能发我一份引用的文件吗,base64.js和crypto.js的
    const base64 = require('base64.js');//Base64,hmac,sha1,crypto相关算法
    const Crypto = require('crypto.js');
    


    2021-04-16
    赞同
    回复 2
    • 猛男陈阔
      猛男陈阔
      2021-04-17
      私信我哈
      2021-04-17
      回复
    • 樂你李
      樂你李
      2021-04-17回复猛男陈阔
      已经找到实现啦,还是谢谢啦^_^
      2021-04-17
      回复
  • 周耀林
    周耀林
    2021-04-14

    你好,引用的文件可以发我一份吗


    2021-04-14
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2021-04-17
      私信我
      2021-04-17
      回复
  • ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
    ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
    2021-02-02

    小写post 为什么不行

    2021-02-02
    赞同
    回复 3
    • 猛男陈阔
      猛男陈阔
      2021-02-02
      截图详细点
      2021-02-02
      回复
    • bush
      bush
      2021-08-03
      统一这个报错什么原因?
      2021-08-03
      回复
    • 猫咪没了鱼
      猫咪没了鱼
      2021-11-22
      你好,解决了吗
      2021-11-22
      回复
  • Humor
    Humor
    2021-02-02

    你好,可以把引用的文件也发我一份吗?我百度了一会,但是没有找到。

    2021-02-02
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2021-02-23
      你私下我 我给你
      2021-02-23
      回复
  • 洞洞洞
    洞洞洞
    2021-01-29

    阿里云文档里有个oss上传回调 怎么操作

    2021-01-29
    赞同
    回复 3
    • 猛男陈阔
      猛男陈阔
      2021-01-29
      const uploadFile = function (filePath, dir, successc, failc) 
      successc是上传成功的回调,failc是上传失败的回调
      2021-01-29
      回复
    • 洞洞洞
      洞洞洞
      2021-02-19回复猛男陈阔
      oss上传的回调设置 微信小程序可以做吗
      2021-02-19
      回复
    • 猛男陈阔
      猛男陈阔
      2021-02-23回复洞洞洞
      这我要研究下
      2021-02-23
      回复
  • 我不是兔子嘞
    我不是兔子嘞
    2021-01-20

    你好,我也在做小程序上传oss视频,能把引用的文件发我一份吗?获取签名那里总是报错

    2021-01-20
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2021-01-20
      好 我私信你了
      2021-01-20
      回复
  • 想到名字再改
    想到名字再改
    2021-01-19

    你好 请问这个需要引入什么文件吗?

    2021-01-19
    赞同
    回复 7
    • 猛男陈阔
      猛男陈阔
      2021-01-20
      我这里引入了一些加密的文件,你如果有需要的话,可以私信我,我发给你
      2021-01-20
      回复
    • 想到名字再改
      想到名字再改
      2021-02-17回复猛男陈阔
      你好,我这边使用PC端上传图片到阿里云oss失败,不知道是不是crypto.js的问题,手机和开发工具都正常,请问是什么原因呢?
      2021-02-17
      回复
    • 猛男陈阔
      猛男陈阔
      2021-02-23回复想到名字再改
      检查下crypto.js是否有util这个方法
      2021-02-23
      回复
    • 想到名字再改
      想到名字再改
      2021-03-09回复猛男陈阔
      你好,有util这个方法,但是就是上传不了,不清楚什么原因导致的,移动端都正常,但是pc端上传不了
      2021-03-09
      回复
    • 猛男陈阔
      猛男陈阔
      2021-03-09回复想到名字再改
      你私聊我 我给你加密方法吧
      2021-03-09
      回复
    查看更多(2)
  • 翰文丶
    翰文丶
    2021-01-06

    这个报错是什么原因呀?

    2021-01-06
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2021-01-06
      dowload域名填写了吗?
      2021-01-06
      回复
  • ༄ེ🌴love foreverཉ྄ིོུ
    ༄ེ🌴love foreverཉ྄ིོུ
    2020-12-01

    我的阿里云oss地址是http格式的 没法在后台配置upload合法域名

    2020-12-01
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2020-12-01
      必须是https的哦
      2020-12-01
      回复
  • ㅤ
    2020-11-02

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

    2020-11-02
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2020-11-02
      最好是这样
      2020-11-02
      2
      回复

正在加载...

登录 后发表内容