微信小程序中调用阿里云 OSS(Object Storage Service)上传文件

在微信小程序中调用阿里云 OSS(Object Storage Service)上传文件,可以通过以下步骤实现。由于微信小程序的运行环境是浏览器环境的一个子集,因此需要使用适合小程序的 OSS SDK 或手动实现上传逻辑。

 1. 准备工作
 1.1 获取阿里云 OSS 配置
 Bucket 名称:你的 OSS 存储桶名称。
 Region:存储桶所在的地域(如 osscnhangzhou)。
 AccessKeyId 和 AccessKeySecret:阿里云账号的访问密钥(建议使用 STS 临时凭证以提高安全性)。

 1.2 安装 OSS SDK
微信小程序不支持直接使用 Node.js 的 alioss SDK,因此需要使用适用于小程序的 OSS SDK,或者手动实现上传逻辑。

 2. 使用小程序 OSS SDK
阿里云官方提供了一个适用于小程序的 OSS SDK:[aliosswxsdk](https://github.com/alisdk/aliosswxsdk)。

 2.1 安装 SDK
在小程序项目中安装 SDK:
bash
npm install aliosswxsdk


 2.2 初始化 OSS 客户端
在小程序的 app.js 或页面逻辑中初始化 OSS 客户端:
javascript
const OSS = require('aliosswxsdk');

const client = new OSS({
  region: 'osscnhangzhou', // 你的 OSS Region
  accessKeyId: 'youraccesskeyid', // 你的 AccessKeyId
  accessKeySecret: 'youraccesskeysecret', // 你的 AccessKeySecret
  bucket: 'yourbucketname', // 你的 Bucket 名称
});


 2.3 上传文件
在小程序中选择文件并上传:
javascript
Page({
  data: {
    filePath: '',
  },

  // 选择文件
  chooseFile() {
    const that = this;
    wx.chooseImage({
      count: 1,
      success(res) {
        const tempFilePaths = res.tempFilePaths;
        that.setData({
          filePath: tempFilePaths[0],
        });
        that.uploadFile(tempFilePaths[0]);
      },
    });
  },

  // 上传文件
  uploadFile(filePath) {
    const fileName = filePath.split('/').pop(); // 获取文件名
    const fileKey = uploads/${fileName}; // 设置 OSS 上的文件路径

    client.put(fileKey, filePath).then((res) => {
      console.log('上传成功', res);
      wx.showToast({
        title: '上传成功',
        icon: 'success',
      });
    }).catch((err) => {
      console.error('上传失败', err);
      wx.showToast({
        title: '上传失败',
        icon: 'none',
      });
    });
  },
});


 2.4 页面布局
在小程序的页面布局中添加一个按钮,用于触发文件选择和上传:
xml
<view>
  <button bindtap="chooseFile">选择文件并上传</button>
</view>


 3. 使用 STS 临时凭证(推荐)
为了安全起见,建议使用 STS(Security Token Service)临时凭证来上传文件。你可以在后端生成临时凭证,然后传递给小程序前端使用。

 3.1 后端生成 STS 临时凭证
在后端(如 Node.js)中生成 STS 临时凭证:
javascript
const STS = require('alioss').STS;
const sts = new STS({
  accessKeyId: 'youraccesskeyid',
  accessKeySecret: 'youraccesskeysecret',
});

sts.assumeRole('yourrolearn', 'yourpolicy', 3600, 'yoursessionname').then((result) => {
  console.log(result.credentials);
}).catch((err) => {
  console.error(err);
});


 3.2 小程序使用 STS 临时凭证
在小程序中使用 STS 临时凭证初始化 OSS 客户端:
javascript
const client = new OSS({
  region: 'osscnhangzhou',
  accessKeyId: 'yourstsaccesskeyid',
  accessKeySecret: 'yourstsaccesskeysecret',
  stsToken: 'yourststoken',
  bucket: 'yourbucketname',
});


 4. 手动实现上传逻辑
如果你不想使用 SDK,可以手动实现 OSS 文件上传逻辑。以下是基于微信小程序 wx.uploadFile 的实现:

 4.1 获取上传签名
首先,从后端获取 OSS 上传签名(包括 Policy 和 Signature)。

 4.2 上传文件
使用 wx.uploadFile 上传文件:
javascript
wx.uploadFile({
  url: 'https://yourbucketname.osscnhangzhou.aliyuncs.com', // OSS 上传地址
  filePath: filePath, // 文件路径
  name: 'file', // 文件字段名
  formData: {
    key: uploads/${fileName}, // OSS 上的文件路径
    policy: 'yourpolicy', // 从后端获取的 Policy
    OSSAccessKeyId: 'youraccesskeyid', // 从后端获取的 AccessKeyId
    signature: 'yoursignature', // 从后端获取的 Signature
    success_action_status: '200', // 上传成功后的状态码
  },
  success(res) {
    console.log('上传成功', res);
    wx.showToast({
      title: '上传成功',
      icon: 'success',
    });
  },
  fail(err) {
    console.error('上传失败', err);
    wx.showToast({
      title: '上传失败',
      icon: 'none',
    });
  },
});


 5. 注意事项
 文件大小限制:微信小程序上传文件大小限制为 10MB,如果需要上传更大的文件,可以使用分片上传。
 安全性:不要在前端代码中暴露 AccessKeyId 和 AccessKeySecret,建议使用 STS 临时凭证。
 跨域问题:确保 OSS 的 Bucket 配置了正确的 CORS 规则,允许微信小程序的域名访问。

 总结
 使用 aliosswxsdk 可以方便地在微信小程序中上传文件到阿里云 OSS。
 推荐使用 STS 临时凭证以提高安全性。
 如果需要手动实现上传逻辑,可以使用 wx.uploadFile 并配合后端生成的签名。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66647.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

排序算法——堆排序

什么是堆 堆就是一种特殊的二叉树&#xff0c;他有以下特点&#xff1a; 堆中某个节点的值总是不大于或不小于其父节点的值&#xff1b; 堆总是一棵完全二叉树。 堆又可以分为大根堆和小根堆 大根堆&#xff1a;根节点最大&#xff0c;每个节点都小于或等于父节点 小跟堆&am…

OpenCV相机标定与3D重建(51)对 3x3 矩阵进行 RQ 分解(RQ Decomposition)函数RQDecomp3x3()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算3x3矩阵的RQ分解。 cv::RQDecomp3x3 是 OpenCV 库中的一个函数&#xff0c;用于对 3x3 矩阵进行 RQ 分解&#xff08;RQ Decomposition&…

前端React Router从入门到进阶实战

React Router 是 React 应用中的一个重要库&#xff0c;它用于实现客户端的路由管理&#xff0c;能够将 URL 路径与 React 组件关联起来&#xff0c;从而实现页面之间的导航。React Router 不会像传统的多页面应用那样重新加载页面&#xff0c;而是通过组件切换来呈现不同的视图…

[备忘.OFD]OFD是什么、OFD与PDF格式文件的互转换

‌OFD&#xff08;Open Fixed-layout Document&#xff09;是一种由工业和信息化部软件司牵头中国电子技术标准化研究院制定的版式文档国家标准&#xff0c;属于中国的一种自主格式‌‌。OFD旨在打破政府部门和党委机关电子公文格式不统一的问题&#xff0c;以方便电子文档的存…

机器学习无处不在,AI顺势而为,创新未来

机器学习无处不在&#xff1a; 1、推荐广告和搜索&#xff1a;推广搜不分家&#xff0c;属于数据科学中&#xff0c;对人的行为进行理解 2、计算机视觉CV&#xff1a;对人看到的东西进行理解 3、自然语言处理&#xff1a;对人交流的东西进行理解 4、数据挖掘和数据分析&…

Servlet 和 Spring MVC:区别与联系

前言 在 Java Web 开发中&#xff0c;Servlet 和 Spring MVC 是两个重要的技术。Servlet 是 Java Web 的基础组件&#xff0c;而 Spring MVC 是一个高级 Web 框架&#xff0c;建立在 Servlet 的基础之上&#xff0c;提供了强大的功能和易用性。这篇文章将从定义、原理、功能对…

K-means算法在无监督学习中的应用

K-means算法在无监督学习中的应用 K-means算法是一种典型的无监督学习算法&#xff0c;广泛用于聚类分析。在无监督学习中&#xff0c;模型并不依赖于标签数据&#xff0c;而是根据输入数据的特征进行分组。K-means的目标是将数据集分成K个簇&#xff0c;使得同一簇内的数据点…

Linux 35.6 + JetPack v5.1.4之 pytorch升级

Linux 35.6 JetPack v5.1.4之 pytorch升级 1. 源由2. 升级步骤1&#xff1a;获取二进制版本步骤2&#xff1a;安装二进制版本步骤3&#xff1a;获取torchvision步骤4&#xff1a;安装torchvision步骤5&#xff1a;检查安装版本 3. 使用4. 补充4.1 torchvision版本问题4.2 支持…

ASP.NET Core 实现微服务 -- Polly 服务降级熔断

在我们实施微服务之后&#xff0c;服务间的调用变的异常频繁。多个服务之间可能是互相依赖的关系。某个服务出现故障或者是服务间的网络出现故障都会造成服务调用的失败&#xff0c;进而影响到某个业务服务处理失败。某一个服务调用失败轻则造成当前相关业务无法处理&#xff1…

Flink分区方式有哪些

Flink分区的方式决定了上游subtask的数据是如何流向下游subtask的,目前Flink提供了共8种分区算子,每个都对应着各自具体的分区器,可以见DataStream类里的方法shuffle、rebalance、rescale、keyBy、global、forward、broadcast、partitionCustom方法。以上方法除了keyBy返回的…

Spring——自动装配

假设一个场景&#xff1a; 一个人&#xff08;Person&#xff09;有一条狗&#xff08;Dog&#xff09;和一只猫(Cat)&#xff0c;狗和猫都会叫&#xff0c;狗叫是“汪汪”&#xff0c;猫叫是“喵喵”&#xff0c;同时人还有一个自己的名字。 将上述场景 抽象出三个实体类&…

TCP与DNS的报文分析

场景拓扑&#xff1a; 核心路由配置&#xff1a; 上&#xff08;DNS&#xff09;&#xff1a;10.1.1.1/24 下(WEB)&#xff1a;20.1.1.1/24 左&#xff08;client&#xff09;&#xff1a;192.168.0.1/24 右(PC3)&#xff1a;192.168.1.1/24Clint2配置&a…

PWR-STM32电源控制

一、原理 睡眠模式不响应其他操作&#xff0c;比如烧写程序&#xff0c;烧写时按住复位键松手即可下载&#xff0c;在禁用JTAG也可如此烧写程序。 对于低功耗模式可以通过RTC唤醒、外部中断唤醒、中断唤醒。 1、电源框图&#xff1a; VDDA主要负责模拟部分的供电、Vref和Vref-…

WebSocket 测试入门篇

Websocket 是一种用于 H5 浏览器的实时通讯协议&#xff0c;可以做到数据的实时推送&#xff0c;可适用于广泛的工作环境&#xff0c;例如客服系统、物联网数据传输系统&#xff0c; 基础介绍 我们平常接触最多的是 http 协议的接口&#xff0c;http 协议是请求与响应的模式&…

基于机器学习的故障诊断(入门向)

一、原始信号的特征提取 1.EMD经验模态分解的作用 信号分析&#xff1a;EMD可以将信号分解为多个IMFs&#xff0c;每个IMF代表信号中的一个特定频率和幅度调制的成分。这使得EMD能够提供对信号的时频特征进行分析的能力&#xff08;特征提取用到的&#xff09;。信号去噪&…

【算法刷题】leetcode hot 100 双指针

文章目录 283. 移动零11. 盛最多水的容器15. 三数之和42. 接雨水 283. 移动零 https://leetcode.cn/problems/move-zeroes/description/?envTypestudy-plan-v2&envIdtop-100-liked 解法一&#xff1a; 找到第一个等于0的下标&#xff0c;然后继续向右找到第一个不等于0的…

Flutter Xcode 16+ iOS 18.1 使用image_pickers无法弹出选择图片的视图问题

解决 Flutter Xcode 16 使用 image_pickers 无法弹出选择图片视图的问题 在开发 Flutter 应用时&#xff0c;图片选择功能是常见的需求之一。image_pickers 库因其便捷性和功能丰富性&#xff0c;成为了许多开发者的选择。然而&#xff0c;随着 Xcode 版本的不断更新&#xff…

高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现

高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现 目录 高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现1. 高斯混合模型 (GMM) 算法概述1.1 高斯分布1.2 GMM的优势2. GMM的核心技术2.1 模型定义2.2 参数估计2.3 损失函数3. PyTorch实现G…

【蓝桥杯选拔赛真题60】C++寻宝石 第十四届蓝桥杯青少年创意编程大赛 算法思维 C++编程选拔赛真题解

目录 C++寻宝石 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 五、运行结果 六、考点分析 七、推荐资料 C++寻宝石 第十四届蓝桥杯青少年创意编程大赛C++选拔赛真题 一、题目要求 1、编程实现 有N(1<N<100)个盒子排成一排,每个盒子都放…

计算机组成原理(九):乘法器

乘法器原理 乘法器的工作原理可以用二进制乘法来说明。二进制乘法和十进制乘法类似&#xff0c;通过部分积的累加得到结果。 部分积的生成 在二进制乘法中&#xff0c;每一位的乘积是两个二进制数位的 与运算&#xff08;0 0 0&#xff0c;1 0 0&#xff0c;0 1 0&…