当前位置: 首页 > news >正文

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.xdnf.cn/news/172585.html

相关文章:

  • WPF常用技巧汇总 - Part 2
  • Qt项目全局设置UTF-8编码方法(MSVS编译中文报错解决办法)
  • 新能源汽车运动控制器核心芯片选型与优化:MCU、DCDC与CANFD协同设计
  • 设计一个新能源汽车控制系统开发框架,并提供一个符合ISO 26262标准的模块化设计方案。
  • Java高频常用工具包汇总
  • [特殊字符]实战:使用 Canal + MQ + ES + Redis + XXL-Job 打造高性能地理抢单系统
  • Spark Mllib 机器学习
  • 第二章,网络类型及数据链路层协议
  • SMART:大模型在关键推理步骤辅导小模型,在保持高推理效率的同时,显著提升小模型的推理能力!!
  • python合并一个word段落中的run
  • 决策树相关案例
  • 【Node.js 】在Windows 下搭建适配 DPlayer 的轻量(简陋)级弹幕后端服务
  • Linux系统之设置开机启动运行桌面环境
  • 力扣hot100_子串_python版本
  • Nginx配置文件介绍
  • 机器学习day2-seaborn绘图练习
  • 数模学习:二,MATLAB的基本语法使用
  • 跨专业自学AI人工智能学习路线图(2025版)
  • Android完整开发环境搭建/Studio安装/NDK/本地Gradle下载配置/创建AVD/运行一个Android项目/常用插件
  • 金融数据分析(Python)个人学习笔记(13):自然语言处理
  • Kubernetes学习笔记-配置Service对接第三方访问
  • 【Redis】服务端高并发分布式结构演进之路
  • 零基础小白如何上岸数模国奖
  • IDEA 连接 Oracle 数据库
  • 安卓7.0以上抓包配置--Charles
  • ​​全栈自动化:从零构建智能CI/CD流水线​
  • 手搓传染病模型(SEIR)
  • k8s的volume
  • Alibaba Cloud Linux 3.2104 LTS 64位 容器优化版安装docker docker compose记录
  • MyBatis DTD [Element type “if“ must be declared]