文件上传App,H5,小程序多端兼容

news2025/2/8 5:28:59

插件地址:https://ext.dcloud.net.cn/plugin?id=5459

下载lsj-upload插件

代码如下

结构

<lsj-upload :option="option" :size="size" :formats="formats" :debug="debug"
			:instantly="instantly" @change="onChange" @progress="onprogress"
@uploadEnd="onuploadEnd">
			<button class="btn">上传合同</button>
</lsj-upload>

js

data(){
    return {
           // 上传接口参数
			option: {
				// 上传服务器地址,需要替换为你的接口地址
                // 该地址非真实路径,需替换为你项目自己的接口地址
				url: publicFun.wwwRequestUrl + "/gwiip-resource/XXX/put-file",
				// 上传附件的key
				name: 'file',
				// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				header: {
						// token
						"Blade-Auth": publicFun.publictoken()
				},
				// 根据你接口需求自定义body参数
				formData: {
						// 'orderId': 1000
				}
			},
            // 文件上传大小限制
			size: 50,
            // 限制允许上传的格式,空串=不限制,默认为空
			formats: '',
            // 是否打印日志
			debug: true,
            // 选择文件后是否立即自动上传,true=选择后立即上传
			instantly: true,
    }
},
methods:{
            // 文件选择回调
			onChange(files) {
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();

				// 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
			},
            // 上传进度回调
			onprogress(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// console.log('打印对象', JSON.stringify(this.files.get(item.name)));
				// 微信小程序Map对象for循环不显示,所以转成普通数组,不要问为什么,我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();

			},
            // 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				// console.log(`${item.name}已上传结束,上传状态=${item.type}`);
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				
				// 构建接口数据
				let aaa = JSON.parse(item.responseText)
				this.contractParams.contractFileUrl = aaa.data.link
				uploadContract(this.contractParams).then(res => {
					console.log(res);
					if (res.data.code == "200") {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
				// 微信小程序Map对象for循环不显示,所以转成普通数组,
				// 如果你用不惯Map对象,也可以像这样转普通数组,组件使用Map主要是避免反复文件去重操作
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif

				// 强制更新视图
				this.$forceUpdate();
			},
}

效果如下:

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

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

相关文章

网络编程(现在不重要)

目录 网络编程三要素与InetAddress类的使用 软件架构 面临的主要问题 网络编程三要素&#xff08;对应三个问题&#xff09; InetAddress的使用 TCP与UDP协议剖析与TCP编程案例&#xff08;了解&#xff09; TCP协议 UDP协议 例子 UDP、URL网络编程 URL&#xff1a;&…

Android多线程:Handler runOnUiThread 异步消息处理机制

目录 一&#xff0c;Android中的多线程问题 1.模拟耗时工作 2.Android开启子线程 二&#xff0c;在子线程中更新UI 1.异步消息处理机制 Handler 2.使用runOnUiThread更新UI 一&#xff0c;Android中的多线程问题 Android用户界面是与用户交互的接口&#xff0c;对于用户的…

偏微分方程算法之混合边界差分

目录 一、研究对象 二、差分格式 2.1 向前欧拉格式 1. 中心差商 1.1.1 理论推导 1.1.2 算例实现 2. x0处向前差商&#xff0c;x1处向后差商 1.2.1 理论推导 1.2.2 算例实现 2.2 Crank-Nicolson格式 2.2.1 理论推导 2.2.2 算例实现 一、研究对象 这里我们以混合边界…

科技云报道:AI大模型疯长,存储扛住了吗?

科技云报道原创。 AI大模型正在倒逼数字基础设施产业加速升级。 过去一年半&#xff0c;AI大模型标志性的应用相继出现&#xff0c;从ChatGPT到Sora一次次刷新人们的认知。震撼的背后&#xff0c;是大模型参数指数级的增长。 这种数据暴涨的压力&#xff0c;快速传导到了大模…

Efficient Multimodal learning from data-centric perspective

[MLLM-小模型推荐-2024.3.18] Bunny 以数据的眼光看问题 - 知乎近期几天会梳理下多模态小模型相关的论文&#xff0c;做个汇总。为了能够每天更新点啥&#xff0c;先穿插一些小模型算法。等到全部算法都梳理完成后&#xff0c;再发布一篇最终汇总版本的。 3.15 号 BAAI 发布了 …

关于机器学习/深度学习的一些事-答知乎问(五)

嵌入学习方法在解决小样本学习问题时面临的挑战是什么&#xff1f; &#xff08;1&#xff09;过度依赖于辅助数据&#xff0c;预训练的模式违背了小样本学习的本质定义。几乎所有的嵌入学习方法都需要通过大量辅助样本来预训练特征嵌入函数&#xff0c;但在实际应用场景中&am…

葡萄书--图理论基础

图的定义 G{V,E} 节点和边的信息可以是类别型的&#xff0c;类别型数据的取值只能是哪一类别。一般称类别型的信息为标签。 节点和边的信息可以是数值型的&#xff0c;数值型数据的取值范围为实数。一般称数值型的信息为属性。 在图的计算任务中&#xff0c;我们认为&#x…

不消除存储瓶颈,AIGC就是梦幻泡影

大数据产业创新服务媒体 ——聚焦数据 改变商业 在大模型和AIGC的新纪元&#xff0c;我们正见证一个前所未有的技术革命。从更自然的人机对话&#xff0c;到图片、视频生成&#xff0c;AIGC技术正在彻底改变我们创造、学习和交流的方式。 然而&#xff0c;这一切进步的背后&am…

【数据结构|C语言版】顺序表应用

前言1. 基于动态顺序表实现通讯录1.1 通讯录功能1.2 代码实现1.2.1 SeqList.h1.2.2 SeqList.c1.2.3 Contact.h1.2.4 Contact.c1.2.5 test.c 1.3 控制台测试1.3.1 添加联系人1.3.2 删除联系人1.3.3 修改联系人1.3.4 查找联系人1.3.5 清空通讯录1.3.6 通讯录读档和存档 2. 好题测…

如何打开一个fbx模型

步骤 ① 下载fbx viewer &#xff0c;以下是管网链接 FBX Review | Cross-platform 3D model viewer | Autodesk ②需要用邮箱进行注册&#xff0b;确认&#xff0c;这一步完成之后 ③下载之后吧fbx文件导入到这个里面就可以了

NL2SQL进阶系列(4):ConvAI、DIN-SQL、C3-浙大、DAIL-SQL-阿里等16个业界开源应用实践详解[Text2SQL]

NL2SQL进阶系列(4)&#xff1a;ConvAI、DIN-SQL等16个业界开源应用实践详解[Text2SQL] NL2SQL基础系列(1)&#xff1a;业界顶尖排行榜、权威测评数据集及LLM大模型&#xff08;Spider vs BIRD&#xff09;全面对比优劣分析[Text2SQL、Text2DSL] NL2SQL基础系列(2)&#xff1a…

前端导出excel 接口处理和导出处理

如果按照一般的请求方式&#xff0c;接口会返回如下乱码 此时&#xff0c;接口其实已经请求成功了&#xff0c;只需要对乱码进行一下处理就行 1.请求方式处理 1.1 如果是直接使用axios进行请求 axios({method: get,url: url,params: params,//需要添加responseType: blob }…

采用分治法求含n个实数序列中的最大元素和次大元素(C语言)

目录 实验内容&#xff1a; 实验过程&#xff1a; 1.算法设计 2.程序清单 3.复杂度分析 4.运行结果 实验内容&#xff1a; 设计一个程序&#xff0c;采用分治法求含n个实数序列中的最大元素和次大元素&#xff0c;并分析算法的时间复杂度。 实验过程&#xff1a; 1.算法…

深度学习之PyTorch实现卷积神经网络(CNN)

在深度学习领域&#xff0c;卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;是一种非常强大的模型&#xff0c;专门用于处理图像数据。CNN通过卷积操作和池化操作来提取图像中的特征&#xff0c;具有较好的特征学习能力&#xff0c;特别适用…

华为OD机试 - 连续天数的最高利润额(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

AI音乐,8大变现方式——Suno:音乐版的ChatGPT - 第505篇

悟纤之歌 这是利用AI为自己制作的一首歌&#xff0c;如果你也感兴趣&#xff0c;可以花点时间阅读下本篇文章。 ​ 导读 随着新一代AI音乐创作工具Suno V3、Stable audio2.0、天工SkyMusic的发布&#xff0c;大家玩自创音乐歌曲&#xff0c;玩的不亦乐乎。而有创业头脑的朋友…

一些实用的工具网站

200 css渐变底色 https://webgradients.com/ 200动画效果复制 https://css-loaders.com/classic/ 二次贝塞尔曲线 https://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html 三次贝塞尔曲线 https://blogs.sitepointstatic.com/examples/tech/c…

百货商场用户画像描绘and价值分析(下)

目录 内容概述数据说明技术点主要内容4 会员用户画像和特征字段创造4.1 构建会员用户基本特征标签4.2 会员用户词云分析 5 会员用户细分和营销方案制定5.1 会员用户的聚类分析及可视化5.2 对会员用户进行精细划分并分析不同群体带来的价值差异 内容概述 本项目内容主要是基于P…

环形链表II

给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 …

【数据结构|C语言版】单链表

前言1. 单链表的概念和结构1.1 单链表的概念1.2 单链表的结构 2. 单链表的分类3.单链表的实现3.1 新节点创建3.2 单链表头插3.3 单链表头删3.4 单链表尾插3.5 单链表尾删3.6 链表销毁 4. 代码总结4.1 SLT.h4.2 SLT.c4.3 test.c 后言 前言 各位小伙伴大家好&#xff01;时隔不久…