xe-upload上传文件插件

1.xe-upload地址:文件选择、文件上传组件(图片,视频,文件等) - DCloud 插件市场

2.由于开发app要用到上传文件组件,uni.chooseFile在app上不兼容,所以找到了xe-upload,兼容性很强,强烈推荐!!!

说明

不占用页面位置的上传组件;

H5、App、微信小程序中可上传图片,视频和文件;其他端暂时只能上传图片和视频

上传图片通过chooseMedia及chooseImage实现

上传视频通过chooseMedia及chooseVideo实现

H5端上传文件通过chooseFile实现

App上传文件通过renderjs实现

微信小程序上传文件通过chooseMessageFile实现

3.使用方法,到插件市场将插件包导入到自己的项目,然后下列方式调用。

<!-- 也可以下载示例项目查看使用方法 -->
<template><view><button @click="handleUploadClick">上传</button><xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload></view>
</template><script>
export default {data() {return {uploadOptions: {// url: 'http://192.168.31.185:3000/api/upload', // 不传入上传地址则返回本地链接},};},methods: {handleUploadClick() {// 使用默认配置则不需要传入第二个参数// type: ['image', 'video', 'file'];this.$refs.XeUpload.upload('file', {});// this.$refs.XeUpload.upload('image', {//  count: 6,//  sizeType: ['original', 'compressed'],//  sourceType: ['album'],// });},handleUploadCallback(e) {// e.type: ['choose', 'success', 'warning']// choose 是options没有传入url,返回临时链接时触发// success 是上传成功返回对应的数据时触发// warning 上传或者选择文件失败触发// ......},},
};
</script>

 4.回调绑定callback方法:

回调返回的参数:

'callback.type === success' : [{"size": 176579, // 选择的文件的大小"name": "Kafka.pdf", // 选择的文件的名称(小程序端可能会没有)"type": "application/pdf","tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 临时路径"fileType": "file", // 文件类型[image, video, file]"response": {"result": {"fileName": "Kafka.pdf","filePath": `http://localhost:3000/upload/e51d814b649122fc64892d0bc6383d07.pdf`,},"success": true,}, // 上传返回的信息}
]'callback.type === choose' : [{"size": 176579, // 选择的文件的大小"name": "Kafka.pdf", // 选择的文件的名称(小程序端可能会没有)"type": "application/pdf","tempFilePath": "_doc/uniapp_temp/Kafka-16988473328760.pdf", // 文件临时路径"fileType": "file", // 文件类型[image, video, file]}
]

5.注意事项

1、options入参中如果url为空,则choose回调的data列表中只有选择文件能得到的信息和临时路径,临时路径可用于自定义上传方法;传入url选择文件后会自动上传到服务器,此时choose回调不会触发,而是执行success回调,success回调的data列表会包括选择文件能得到的信息
2、当uni.chooseMedia可用时,会优先使用uni.chooseMedia
3、具体使用可下载示例项目运行查看完整示例

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

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

相关文章

Golang|外观模式和具体逻辑

最终返回的是Document的切片&#xff0c;然后取得Bytes自己再去做反序列化拿到文档的各种详细信息。 外观模式是一种结构型设计模式&#xff0c;它的目的是为复杂的子系统提供一个统一的高层接口&#xff0c;让外部调用者&#xff08;客户端&#xff09;可以更简单地使用子系统…

2025年3月AGI技术月评|技术突破重构数字世界底层逻辑

〔更多精彩AI内容&#xff0c;尽在 「魔方AI空间」 &#xff0c;引领AIGC科技时代〕 本文作者&#xff1a;猫先生 ——当「无限照片」遇上「可控试穿」&#xff0c;我们正在见证怎样的智能革命&#xff1f; 被低估的进化&#xff1a;开源力量改写游戏规则 当巨头们在AGI赛道…

可解释人工智能(XAI):让机器决策透明化

在人工智能&#xff08;AI&#xff09;技术飞速发展的今天&#xff0c;AI 系统已经广泛应用于金融、医疗、交通等多个关键领域。然而&#xff0c;随着 AI 系统的复杂性不断增加&#xff0c;尤其是深度学习模型的广泛应用&#xff0c;AI 的“黑箱”问题逐渐凸显。AI 系统的决策过…

【Go语言】ORM(对象关系映射)库

github.com/jinzhu/gorm 是 Go 语言中一个非常流行的 ORM&#xff08;对象关系映射&#xff09;库&#xff0c;用于简化与关系型数据库的交互。以下是关于它的关键信息&#xff1a; 核心特点 全功能 ORM 支持主流数据库&#xff1a;MySQL、PostgreSQL、SQLite、SQL Server 等。…

大数据企业实验室管理的痛点 质检LIMS系统在大数据企业的应用

在数字化转型浪潮中&#xff0c;大数据企业正面临海量数据管理与质量控制的双重挑战。实验室作为数据生产的核心环节&#xff0c;其检测流程的规范化、数据处理的智能化直接关系到企业数据资产的可靠性。质检LIMS&#xff08;实验室信息管理系统&#xff09;通过整合实验室资源…

在Arduino U8g2库中显示中文的方法

U8g2库支持中文显示&#xff0c;但需要手动添加中文字体或使用内置的有限中文字符。以下是具体实现方法&#xff1a; 方法一 使用U8g2内置的中文字体&#xff08;不推荐&#xff09; 缺点&#xff1a;内置字体支持的汉字较少&#xff0c;可能无法显示所有需要的字符。不推荐。…

自动驾驶分级

一、美国 SAE J3016 Taxonomy and Definitions for Terms Related to Driving Automation Systems for On-Road Motor Vehicles(2021) 1、驾驶自动化级别&#xff08;Levels of Driving Automation&#xff09; 共分为 6 个级别&#xff0c;从 无自动化&#xff08;0&#…

工业园区工厂企业数字IP广播应急呼叫对讲系统:数字IP广播极大提升工厂企业管理效率与应急响应效能

工业园区工厂企业数字IP广播应急呼叫对讲系统:数字IP广播极大提升工厂企业管理效率与应急响应效能 北京海特伟业科技有限公司任洪卓发布于2025年4月28日 在数字化转型浪潮下&#xff0c;IP应急广播呼叫对讲广播系统凭借其网络化、智能化、融合化、多元化等优势&#xff0c;已…

DNS主从同步及解析

DNS 域名解析原理 域名系统的层次结构 &#xff1a;DNS 采用分层树状结构&#xff0c;顶级域名&#xff08;如.com、.org、.net 等&#xff09;位于顶层&#xff0c;下面是二级域名、三级域名等。例如&#xff0c;在域名 “www.example.com” 中&#xff0c;“com” 是顶级域名…

再看 BBR 到 BBRv3 的公平性改进

从看一篇论文开始&#xff1a;Performance Evaluation of TCP BBRv3 in Networks with Multiple Round Trip Times&#xff0c;结论比较悲观&#xff1a; 虽然 BBRv2/3 试图解决 BBRv1 的公平性问题&#xff0c;但结果依旧不够理想&#xff0c;BBR 的迭代依旧任重而道远。 BB…

locust压力测试

安装 pip install locust验证是否安装成功 locust -V使用 网上的教程基本上是前几年的&#xff0c;locust已经更新了好几个版本&#xff0c;有点过时了&#xff0c;在此做一个总结 启动 默认是使用浏览器进行设置的 # 使用浏览器 locust -f .\main.py其他参数 Usage: locust […

优先队列和单调队列(双端队列实现的)

这里写自定义目录标题 一、优先队列与单调队列二、优先队列2.1 概念2.2 增删查 判空2.3 示例代码 三、双端队列四、单调队列4.1 单调递增队列4.2 单调递减队列 一、优先队列与单调队列 二、优先队列 2.1 概念 一种特殊的队列&#xff0c;它与普通队列的主要区别在于元素的出…

如何在idea中写spark程序

在 IntelliJ IDEA 中编写 Spark 程序是一个高效且便捷的方式&#xff0c;以下是一个详细的步骤指南&#xff0c;帮助你在 IntelliJ IDEA 中创建和运行 Spark 程序。 一、环境准备 安装 Java&#xff1a; 确保已经安装了 JDK 1.8 或更高版本。可以通过以下命令检查&#xff1a;…

BERT BERT

BERT ***** 2020年3月11日更新&#xff1a;更小的BERT模型 ***** 这是在《深阅读的学生学得更好&#xff1a;预训练紧凑模型的重要性》&#xff08;arXiv:1908.08962&#xff09;中提到的24种较小规模的英文未分词BERT模型的发布。 我们已经证明&#xff0c;标准的BERT架构和…

SpringBoot启动警告:OpenJDK 64-Bit Server VM warning

问题描述 以Debug模式启动Spring boot项目之后&#xff0c;日志打印&#xff1a;OpenJDK 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended&#xff0c; 警告信息 解决方案&#xff1a;配置VM opt…

“该虚拟机似乎正在使用中“

当某一天打开虚拟机突然弹出"该虚拟机似乎正在使用中"。 遇到这种问题的解决方法很简单&#xff0c;出现这种问题是因为错误关闭虚拟机导致&#xff0c;当我们点击获取所有权时发现不能解决问题。这里分享一种简单的解决方法。 打开虚拟机的文件目录 找到lck文件夹下…

【CSS】层叠,优先级与继承(三):超详细继承知识点

目录 继承一、什么是继承&#xff1f;2.1 祖先元素2.2 默认继承/默认不继承 二、可继承属性2.1 字体相关属性2.2 文本相关属性2.3 列表相关属性 三、不可继承属性3.1 盒模型相关属性3.2 背景相关属性 四、属性初始值4.1 根元素4.2 属性的初始值4.3 得出结论 五、强制继承5.1 in…

Android LiveData关键代码

1、observer方法 public void observe(NonNull LifecycleOwner owner, NonNull Observer<? super T> observer) {assertMainThread("observe");if (owner.getLifecycle().getCurrentState() DESTROYED) {// ignorereturn;}LifecycleBoundObserver wrapper …

Docker-高级使用

前言 书接上文Docker-初级安装及使用_用docker安装doccano-CSDN博客&#xff0c;我们讲解了Docker的基本操作&#xff0c;下面我们讲解的是高级使用&#xff0c;请大家做好准备&#xff01; 大家如果是从初级安装使用过来的话&#xff0c;建议把之前镜像和搭载的容器数据卷里面…

Spring Boot常用注解详解:实例与核心概念

Spring Boot常用注解详解&#xff1a;实例与核心概念 前言 Spring Boot作为Java领域最受欢迎的快速开发框架&#xff0c;其核心特性之一是通过注解&#xff08;Annotation&#xff09;简化配置&#xff0c;提高开发效率。注解驱动开发模式让开发者告别繁琐的XML配置&#xff…