微信小程序上传图片到阿里云OSS,读取上传后oss后的图片

2023-10-26

一、config.js

var fileHost="xxxx.aliyuncs.com(你的阿里云oss地址)"
var config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`, //默认存在根目录,可根据需求改
  AccessKeySecret: '填你自己的AccessKeySecret',
  OSSAccessKeyId: '填你自己的 OSSAccessKeyId',
  timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

二、Base64,hmac,sha1,crypto相关算法

https://github.com/peterhuang007/weixinFileToaliyun

三、UploadAliyun.js

const env = require('../config.js');

const Base64 = require('./Base64.js');

require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');


const uploadFile = function (params) {
  if (!params.filePath || params.filePath.length < 9) {
    wx.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', '');

  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;

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

  return signature;
}

module.exports = uploadFile;

四、使用

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

五、在需要使用的地方

uploadImage(
{
  filePath: filePath,
  dir: "images/",
  success: function (res) {
    console.log("上传成功")
  },
  fail: function (res) {
    console.log("上传失败")
    console.log(res)
  }
})

六 ,注意在开发者工具上传图片oss只有文件夹没有图片,但是真机上传没问题

七,读取在线的oss,

        1、首先桶Bucket要设置域名

        2、桶Bucket要设置公共读取

        3、线上的域名拼接路径

uploadImage({
      filePath: this.data.avatarUrl,
      dir: "images1/",
      success: function (res) {
        console.log('路径',`线上的域名/${res}`);
        console.log("上传成功",res)
      },
      fail: function (res) {
        console.log("上传失败")
        console.log(res)
      }
    })

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序上传图片到阿里云OSS,读取上传后oss后的图片 的相关文章

  • CyclicBarrier底层源码解析

    一 概述 前面我们讲解了ReentrantLock CountDownLatch Semaphore的源码 他们都是由AQS来实现的 而CyclicBarrier则是通过ReentrantLock Condition实现的 CyclicBa

随机推荐

  • 达夫设备简单介绍

    前言 想到肯哥每天的Open话题 总能学到一些知识 怕忘记 所以我就当成博客记录一下了 今天要记录的是2023年6月5日 肯哥的技术交流群里面的一个代码 肯哥话题 肯哥的原话 hello 又到了每天的open话题时刻 今天我们聊点技术的东西
  • MATLAB学习——Matlab系统环境介绍

    本篇文章并不涉及Matlab的具体使用方法和相关函数 仅仅是和大家一起熟悉Matlab的操作界面 祝大家小年快乐 记得吃糖瓜 总体来说 Matlab的使用界面和office的使用界面具有很高的相似性 因此 对于要熟悉Matlab使用的初学者
  • JVM内存分配机制

    学习了JVM的内存分配机制为大家分享一下 现在把学习笔记总结记录一下 如果记录有些错误 还望指出 一 对象的创建 对象创建的主要流程 1 类加载检查 虚拟机遇到一条new指令时 首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引
  • 【 OpenCV】——图像缩放

    OpenCV 图像缩放 前言 本文介绍了图像放大 图像放小基础内容 使用步骤 1 引入库 include
  • 第五章 运输层 ---概述,端口号,复用,分用

    第五章 运输层 概述 端口号 复用 分用 5 1 运输层概述 作用范围与简介 总结 5 2 运输层端口号 复用 分用的概念 运输层端口号 发送方的复用与接收方的分用 TCP IP体系的应用层常用协议所使用的运输层熟知端口号 5 1 运输层概
  • python 定时器

    1 BlockingScheduler库 缺点 会阻塞代码 优点 调用定时函数时方便灵活定义定时 比如间隔多长时间调用一次 比如那几个月调用一次 代码 from apscheduler schedulers blocking import
  • torch.tensor拼接与list(tensors)

    tensor list tensors Construct list tensors To stack list tensors To concatenate list tensors Construct list tensors 创建一个
  • Linux操作笔记

    1 关闭死程序 root node3 ps aux grep fire root 2105 0 0 0 0 112660 964 pts 0 S 15 10 0 00 grep color auto fire root 10620 0 0
  • 最简单的Flutter权限管理插件

    文章目录 用法 配置权限 Android iOS 检查权限 请求权限 处理回调 例子 插件开发 欢迎关注公众号 编程之路从0到1 这是Flutter上的一个动态权限处理的插件库 可以让Flutter应用层的开发者以非常简单的API统一处理原
  • Springboot整合redis

    Springboot整合redis 原文链接 https www kuangstudy com bbs 1534913977346584577 为方便自己整合redis 特记录一下redisTemplate和redisUtil代码 1 自定
  • Kafka 2.0的简单Producer和Consumer实现

    系统环境 在kafka单节点运行环境下 尝试使用java创建Kafka的Producer和Consumer进行测试 具体的代码环境如下 OS Ubuntu 16 4 Kafka 2 11 2 0 0 Zookeeper 使用Kafka中自带
  • 【部署】Docker容器

    Docker 使用 Google 公司推出的 Go 语言进行开发实现 基于 Linux 内核的 cgroup namespace 以及 OverlayFS 类的 Union FS 等技术 对进程进行封装隔离 属于操作系统层面的虚拟化技术 由
  • TCN-时间卷积网络

    目录 一 引言 二 时序卷积神经网络 2 1 因果卷积 Causal Convolution 2 2 膨胀卷积 Dilated Convolution 2 3 残差链接 Residual Connections 三 讨论和总结 1 TCN的
  • 前端笔记列表

    下载 我的博客 欢迎交流 我的CSDN博客 欢迎交流 微信小程序专栏 前端笔记专栏 微信小程序实现部分高德地图功能的DEMO下载 微信小程序实现MUI的部分效果的DEMO下载 微信小程序实现MUI的GIT项目地址 微信小程序实例列表 前端笔
  • 【docker系列】使用非root用户安装及启动docker(rootless模式运行)

    通过我之前的文章已经可以验证 在root用户下安装启动的容器存在安全问题 究其原因是因为 容器内的root用户就是宿主机的root用户 容器内uid 1000的用户就是宿主机uid 1000的用户 docker的守护进程是root权限的 既
  • 华为2014校园招聘笔试,围棋吃子判断

    题目大意 一个围棋盘的位置总共有三种状态 分别为空 白棋 黑棋 分别用0 1 2来表示 每一个位置都有上下左右四个邻居 当其邻居中有一个空格 则说明这个位置的棋子有气 当然 气是可以传递的 即只要一颗棋子它周围有气 则所有与该棋子相连的相同
  • 反激变换器DCM模式增益推导

    针对反激变换器的DCM 电感电流断续模式 的增益进行推导 主要原理为电感的伏秒平衡和电容的安秒平衡原理 反激变换器的原理图如下 根据电容的安秒平衡原理可知 输出电容C在一个周期内的平均电流为0 故输出侧电流i2的平均值等于负载电流平均值 式
  • 如何制定性能测试计划

    如何制定一份性能测试计划 考虑以下几个方面 1 明确测试目标和范围 确定要测试的系统 应用程序或网站 并明确测试的目标和范围 例如测试响应时间 吞吐量 并发用户数等 2 确定测试环境 选择适当的测试环境 包括硬件 软件 网络等 以确保测试结
  • Intrinsics头文件与SIMD指令集、Visual Studio版本对应表

    Intrinsics头文件与SIMD指令集 Visual Studio版本对应表 File Intrinsics头文件 描述 指令集描述 VS Visual Studio版本号 VisualStudio Visual Studio版本名 F
  • 微信小程序上传图片到阿里云OSS,读取上传后oss后的图片

    一 config js var fileHost xxxx aliyuncs com 你的阿里云oss地址 var config aliyun OSS config uploadImageUrl fileHost 默认存在根目录 可根据需求