在Uniapp中使用阿里云OSS插件实现文件上传

embedded/2025/2/11 21:37:30/

在开发小程序时,文件上传是一个常见的需求。阿里云OSS(Object Storage Service)是一个强大的云存储服务,可以帮助我们高效地存储和管理文件。本文将介绍如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。

1. 准备工作

首先,我们需要在Uniapp项目中引入阿里云OSS插件。插件的地址为:https://ext.dcloud.net.cn/plugin?id=5416。在HBuilderX中打开项目,找到manifest.json文件,在App原生插件配置中勾选该插件。

2. 初始化OSS插件

在使用OSS插件之前,我们需要对其进行初始化。初始化时需要配置STS服务器地址、OSS的Endpoint以及本地文档路径。以下是一个初始化的示例代码:

var oss = uni.requireNativePlugin("MZ-AliyunOss");init() {var self = this;oss.init({stsServer: 'https://xxx.xxx.com/api/createVideo/ossToken', // STS服务器地址endPoint: "https://oss-cn-shanghai.aliyuncs.com", // OSS的EndpointdocPath: plus.io.convertLocalFileSystemURL("_doc"), // 本地文档路径}, ret => {console.log("---------------------------ret", ret) });
},

在初始化时,stsServer是获取临时凭证的服务器地址,endPoint是OSS服务的访问地址,docPath是本地文件的存储路径。

3. 上传文件

初始化完成后,我们可以使用OSS插件上传文件。以下是一个上传视频文件的示例代码:

recordVideo() {let that = this;uni.chooseVideo({sourceType: ["camera", "album"], // 从相机拍摄或相册选择compressed: false, // 不压缩视频maxDuration: this.selData.subVideoLen, // 限制拍摄时长camera: "back", // 使用后置摄像头success: (res) => {console.log("拍摄成功", res);uni.showLoading({title: "上传中...",mask: true, // 遮罩层,防止用户操作});let pathArr = res.tempFilePath.split("/");let fileName = pathArr[pathArr.length - 1];let fileExt = fileName.split(".")[1];let videoName = fileName.split(".")[0] + "." + fileExt;let videopath = plus.io.convertLocalFileSystemURL(res.tempFilePath);oss.setUploadObjectListener({}, ret => {console.log(ret); if(ret.eventType=='onSuccess'){let awemeUrl = "https://xxx.oss-cn-shanghai.aliyuncs.com/dzjz/" + videoName;console.log("上传成功,文件地址:", awemeUrl);} });oss.uploadObject({bucket: 'xxx', // OSS的Bucket名称key: 'dzjz/'+videoName, // 文件在OSS中的存储路径path: videopath // 本地文件路径}, ret => { console.log("上传结果:", ret);}); },fail: (err) => {console.error("拍摄失败", err.errMsg);},});
},

上传失败回调

在这里插入图片描述

在上传文件时,我们首先使用uni.chooseVideo方法选择或拍摄视频文件。然后,通过oss.uploadObject方法将文件上传到OSS。上传过程中,可以通过oss.setUploadObjectListener监听上传状态,当上传成功时,可以获取到文件的访问地址。

4. 总结

通过以上步骤,我们可以在Uniapp小程序中轻松实现文件上传功能。阿里云OSS插件提供了简单易用的API,使得文件上传变得非常方便。希望本文对你有所帮助,如果有任何问题,欢迎在评论区留言讨论。

注意:在实际使用中,请将代码中的xxx替换为实际的OSS配置信息,如Bucket名称、STS服务器地址等。


http://www.ppmy.cn/embedded/161426.html

相关文章

PID 算法简介(C语言)

一、简介: PID是比例、积分、微分三个环节的组合,用来进行反馈控制。每个部分都有对应的系数,也就是Kp、Ki、Kd。PID 算法实现这三个部分的计算,然后综合起来得到控制输出。 二、PID控制器结构体: PID控制器结构体:包含PID参数(Kp, Ki, Kd);存储积分项和上一次误差;…

疯狂前端面试题(二)

一、Webpack的理解 Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。Webpack 能够将各种资源(JavaScript、CSS、图片、字体等)视为模块,并通过依赖关系图将这些模块打包成一个或多个最终的输出文件(通常是一个或几个…

【Python深入浅出】Python3中os模块:开启系统交互的万能钥匙

目录 一、引言:os 模块初印象二、os 模块基础操作2.1 文件与目录操作2.1.1 创建操作2.1.2 读取操作2.1.3 删除操作2.1.4 信息获取 2.2 系统信息获取与环境变量管理2.2.1 系统信息获取2.2.2 环境变量管理 2.3 进程管理与工作目录操作2.3.1 进程管理2.3.2 工作目录操作…

prometheus配置大盘与告警

1、prometheus配置大盘 kube-prometheus-stack 定义 dashboard https://stackoverflow.com/questions/77271449/persist-grafana-dashboard-on-kube-prometheus-and-expose-itAlso to persist dashboards to outlive pod deletion follow the below steps: Create your cust…

03/29 使用 海康SDK 对接时使用的 MysqlUtils

前言 最近朋友的需求, 是需要使用 海康sdk 连接海康设备, 进行数据的获取, 比如 进出车辆, 进出人员 这一部分是 资源比较贫瘠时的一个 Mysql 工具类 测试用例 public class MysqlUtils {public static String MYSQL_HOST "192.168.31.9";public static int MY…

【ESP32cam人脸识别开门及服务器端实战源码】

本项目实现了一个基于ESP32-CAM的实时人脸识别系统,能够通过WiFi进行视频流传输,并在检测到人脸时触发开门指令。系统由两个主要部分组成:video.py(后端服务器)和 ESP32-CAM.ino(ESP32-CAM固件)…

保姆级教程Docker部署Zookeeper镜像

目录 一、安装Docker及可视化工具 二、创建Zookeeper网络 三、镜像选择 四、单节点部署 1、创建挂载目录 2、命令运行容器 3、Compose运行容器 4、查看运行状态 5、验证是否正常运行 一、安装Docker及可视化工具 Docker及可视化工具的安装可参考:Ubuntu上…

机器学习 - 理解偏差-方差分解

为了避免过拟合,我们经常会在模型的拟合能力和复杂度之间进行权衡。拟合能力强的模型一般复杂度会比较高,容易导致过拟合。相反,如果限制模型的复杂度,降低其拟合能力,又可能会导致欠拟合。因此,如何在模型…