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

在开发小程序时,文件上传是一个常见的需求。阿里云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.rhkb.cn/news/16282.html

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

相关文章

Tomcat添加到Windows系统服务中,服务名称带空格

要将Tomcat添加到Windows系统服务中,可以通过Tomcat安装目录中“\bin\service.bat”来完成,如果目录中没有service.bat,则需要使用其它方法。 打到CMD命令行窗口,通过cd命令跳转到Tomcat安装目录的“\bin\”目录,然后执…

Android Studio集成讯飞SDK过程中在配置Project的时候有感

在配置讯飞的语音识别SDK(流式版)时候,跟着写了两个Demo,一个是YuYinTestDemo01,另一个是02,demo01比较简单,实现功能图象也比较简陋,没用讯飞SDK提供的图片,也就是没用到…

DeepSeek 助力 Vue 开发:打造丝滑的进度条

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…

NLP Word Embeddings

Word representation One-hot形式 在上一周介绍RNN类模型时,使用了One-hot向量来表示单词的方式。它的缺点是将每个单词视为独立的,算法很难学习到单词之间的关系。 比如下面的例子,即使语言模型已经知道orange juice是常用组合词&#xf…

CNN卷积神经网络多变量多步预测,光伏功率预测(Matlab完整源码和数据)

代码地址:CNN卷积神经网络多变量多步预测,光伏功率预测(Matlab完整源码和数据) 标题:CNN卷积神经网络多变量多步预测,光伏功率预测 一、引言 1.1 研究背景及意义 随着全球能源危机的加剧和环保意识的提升&#xff…

本地部署DeepSeek Nodejs版

目录 1.下载 Ollama 2.下载DeepSeek模型 3.下载 ollama.js 1.下载 Ollama https://ollama.com/ 下载之后点击安装,等待安装成功后,打开cmd窗口,输入以下指令: ollama -v 如果显示了版本号,则代表已经下载成功了。…

【Vue中BUG解决】npm error path git

报错内容如下: 从错误信息可知,这是一个 ENOENT(No Entry,即找不到文件或目录)错误,并且与 git 相关。具体来说,npm 在尝试调用 git 时,无法找到 git 可执行文件,下面为…

Jenkins+gitee 搭建自动化部署

Jenkinsgitee 搭建自动化部署 环境说明: 软件版本备注CentOS8.5.2111JDK1.8.0_211Maven3.8.8git2.27.0Jenkins2.319最好选稳定版本,不然安装插件有点麻烦 一、安装Jenkins程序 1、到官网下载相应的版本war或者直接使用yum安装 Jenkins官网下载 直接…

插入排序和希尔排序

目录 插入排序 插入排序代码实现: 插入排序思路: 希尔排序: 什么是希尔排序: 希尔排序代码实现: 希尔排序思路: 插入排序(稳定) 假设有这样一个数组,想要从小到大进行排…

elasticsearch

1、什么是elasticsearch elasticsearch被广泛用于日志分析、实时监控领域 elastic stack (ELK) ①kibana 数据可视化 ②elasticsearch存储、计算、搜索数据 ③Longstash、Beats 数据抓取 操作ES的语句称之为DSL语句 2、ES倒排索引 3、ES单节点安装…

【AcWing】蓝桥杯辅导课-数学与简单DP

目录 数学 买不到的数目 蚂蚁感冒 饮料换购 DP 01背包问题 摘花生 最长上升子序列 地宫取宝 波动数列 数学 买不到的数目 1205. 买不到的数目 - AcWing题库 这道题的意思就是给定两个正整数p和q,求xpyq这一个组合不能凑出来的最大正整数是多少 首先我们…

PyQt学习记录01——加法计算器

0. 安装配置 0.1 安装相关库 首先打开你的PyCharm程序,然后新建一个目录用于学习,其次在terminal中输入 pip install pyqt5如果你不具有科学上网能力,请改为国内源 pip install pyqt5 -i https://pypi.douban.com/simple然后安装pyqt相关…

[Linux] 信号(singal)详解(二):信号管理的三张表、如何使用coredump文件、OS的用户态和内核态、如何理解系统调用?

标题:[Linux] 信号管理的三张表、如何使用coredump文件、OS的用户态和内核态、如何理解系统调用? 水墨不写bug (图片来源:文心一言) 正文开始: 目录 一、信号管理的三张表 (1)三张表…

2025.2.11

1> 制作一个闹钟软件 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QTime> #include <QTimer> #include <QTimeEdit> #include <QDa…

和鲸科技上线 DeepSeek 系列模型服务,助力数智企业 AI 业务创新!

近日&#xff0c;和鲸科技团队宣布旗下数据科学协同平台 ModelWhale 实现对 DeepSeek 全系列大模型的深度支持&#xff0c;旨在帮助更多数智化转型企业提供从算力基建到业务融合的全栈式解决方案&#xff0c;快速搭建自主可控的云端智能服务体系&#xff0c;实现大模型与业务系…

使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器进行模型检查点处理

2023 年 11 月&#xff0c;Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元&#xff08;数据集和数据加载器&#xff09;的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…

基于 SpringBoot 和 Vue 的智能腰带健康监测数据可视化平台开发(文末联系,整套资料提供)

基于 SpringBoot 和 Vue 的智能腰带健康监测数据可视化平台开发 一、系统介绍 随着人们生活水平的提高和健康意识的增强&#xff0c;智能健康监测设备越来越受到关注。智能腰带作为一种新型的健康监测设备&#xff0c;能够实时采集用户的腰部健康数据&#xff0c;如姿势、运动…

【cocos creator】拖拽排序列表

DEMO下载 GameCtrl.ts import ItemCtrl from "./ItemCtrl";const { ccclass, property } cc._decorator;ccclass export default class GameCtrl extends cc.Component {property(cc.Node)content: cc.Node null;property(cc.Node)prefab: cc.Node null;arr []…

Vision Transformer:打破CNN垄断,全局注意力机制重塑计算机视觉范式

目录 引言 一、ViT模型的起源和历史 二、什么是ViT&#xff1f; 图像处理流程 图像切分 展平与线性映射 位置编码 Transformer编码器 分类头&#xff08;Classification Head&#xff09; 自注意力机制 注意力图 三、Coovally AI模型训练与应用平台 四、ViT与图像…

国产编辑器EverEdit - 编辑辅助功能介绍

1 编辑辅助功能 1.1 各编辑辅助选项说明 1.1.1 行号 打开该选项时&#xff0c;在编辑器主窗口左侧显示行号&#xff0c;如下图所示&#xff1a; 1.1.2 文档地图 打开该选项时&#xff0c;在编辑器主窗口右侧靠近垂直滚动条的地方显示代码的缩略图&#xff0c;如下图所示&…