评论

微信小程序调用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
收藏
评论

22 个评论

  • 收割机
    收割机
    2021-12-01

    密钥能放前端?

    2021-12-01
    赞同 1
    回复
  • Yuicon
    Yuicon
    2020-11-02

    学习了

    2020-11-02
    赞同 1
    回复
  • 星星没小郝好看💭
    星星没小郝好看💭
    星期二 09:40

    请教下上传oss时候,uploadFile 返回的 statusCode 不是204由于是偶发未截取到返回code

    星期二 09:40
    赞同
    回复
  • 一方
    一方
    03-03

    好用

    03-03
    赞同
    回复
  • 亿客居-王学义
    亿客居-王学义
    2022-11-29

    ???????????????????????????? WXML文件呢?????


    为什么所有的教程都是只说一半???????????????这酒精是为什么????

    2022-11-29
    赞同
    回复 1
    • 猛男陈阔
      猛男陈阔
      2023-01-29
      WXML设置个点击事件就好了
      2023-01-29
      回复
  • domestic cat
    domestic cat
    2022-03-05
    你好,能发我一份引用的文件吗,base64.js和crypto.js的已私信
    
    2022-03-05
    赞同
    回复 1
    • 念
      2023-06-19
      那是nom i的
      2023-06-19
      回复
  • 。
    2021-12-21

    请问 这是为什么?

    2021-12-21
    赞同
    回复 3
    • The৲One
      The৲One
      2022-08-24
      解决了吗?我也是403或者405
      2022-08-24
      回复
    • 念
      2023-06-19
      是不是没有配置上传服务器域名啊?
      2023-06-19
      回复
    • 。
      2023-07-10
      已解决 oss 后台去配置
      2023-07-10
      回复
  • 刘君
    刘君
    2021-08-26

    如果要删除某个图片, 怎么删掉阿里云上的存储的图片

    2021-08-26
    赞同
    回复 2
  • Leo
    Leo
    2021-07-01

    大佬,求一份引用js

    2021-07-01
    赞同
    回复 1
  • 王浩
    王浩
    2021-06-18

    加密的文件能发一份吗?谢谢

    

    2021-06-18
    赞同
    回复 1

正在加载...

登录 后发表内容