基于uniapp(vue3)H5附件上传组件,可限制文件大小

代码:

<template>
	<view class="upload-file">
		<text>最多上传5份附件,需小于50M</text>
		<view class="" @click="selectFile">
			上传
		</view>

	</view>
	<view class="list" v-if="fileListName.length">
		<view class="file-item" v-for="(item,index) in fileListName">
			<view class="_text_box">{{item}}</view>
			<view @click="delFile(index)">
				<u-icon name="close-circle" color="red"></u-icon>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		// 文件最大体积(mb)
		maxsize: {
			type: [String, Number],
			default: 50
		}
	})
	const fileList = ref([])
	const fileListName = ref([])

	function selectFile() {
		uni.chooseFile({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log("----", props.maxsize);
				console.log("----", chooseImageRes);
				if (chooseImageRes.tempFiles[0].size > (props.maxsize * 1024 * 1024)) {
					uni.showToast({
						icon: "none",
						title: "文件过大"
					})
					return
				}
				// uni.uploadFile({
				// 	url: '', 
				// 	filePath: tempFilePaths[0],
				// 	name: 'file',
				// 	formData: {
				// 		'user': 'test'
				// 	},
				// 	success: (uploadFileRes) => {

				// 	}
				// });
				fileListName.value.push(chooseImageRes.tempFiles[0].name)
			}
		});
	}

	function delFile(index) {
		fileListName.value.splice(index, 1)
	}
</script>

<style lang="scss" scoped>
	.upload-file {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #D8D8D8;
		}

		&>view {
			background: #6D76FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			width: 110rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			color: #fff;
		}
	}

	.file-item {
		width: 100%;
		display: flex;
		justify-content: space-between;

		&>view:nth-child(1) {
			max-width: 500rpx;
			text-align: left;
		}
	}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

html+css+js气球消除小游戏

气球消除小游戏 消除15个就成功 源码在图片后 点赞加关注&#xff0c;谢谢 左上角的数字显示消除气球的数量 定时随机生成气球 &#x1f388;&#x1f388;&#x1f388; 图片 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset&…

C++部分复习笔记上

C语法复习 1. C入门基础 缺省参数 半缺省参数必须从右往左依次来给出&#xff0c;不能间隔着给缺省参数不能在函数声明和定义中同时出现缺省值必须是常量或者全局变量C语言不支持&#xff08;编译器不支持&#xff09; 函数重载 函数重载是函数的一种特殊情况&#xff0c;…

小试牛刀-Solana合约账户详解

目录 一.Solana 三.账户详解 3.1 程序账户 3.2 系统所有账户 3.3 程序派生账户(PDA) 3.4 Token账户 四、相关学习文档 五、在线编辑器 Welcome to Code Blocks blog 本篇文章主要介绍了 [Solana合约账户详解] ❤博主广交技术好友&#xff0c;喜欢文章的可以关注一下❤ …

企业如何管理安全生产工作?(附模板)

总结一下在企业内管理安全中遇到的一些问题&#xff1a; 1、 管理方式落后&#xff0c;还在使用纸质记录 2、 人员信息杂乱无章&#xff0c;无人整理 3、出现问题找不到源头和负责人 我做系统管理已经7年了&#xff0c;题主说的这些问题我之前也遇到过&#xff0c;相信也有…

LabVIEW幅频特性测试系统

使用LabVIEW软件开发的幅频特性测试系统。该系统整合了Agilent 83732B信号源与Agilent 8563EC频谱仪&#xff0c;通过LabVIEW编程实现自动控制和数据处理&#xff0c;提供了成本效益高、操作简便的解决方案&#xff0c;有效替代了昂贵的专用仪器&#xff0c;提高了测试效率和设…

taro小程序terser-webpack-plugin插件不生效

背景 taro小程序terser-webpack-plugin插件不生效 运行环境&#xff1a; taro3.6.32vue3.2.24 webpack5 不断尝试过 按官网这种配置不生效&#xff0c;然后又看了文档中赋的这个链接《编写插件&#xff0c;将 Taro 编译打包耗时缩短至三分之一》。 按这个文档中的配置&…

魏建军亲测智驾第二季:长城全场景NOA挑战重庆

6月30日&#xff0c;魏建军再次直播长城的全场景智能驾驶NOA。上一次直播是保定&#xff0c;而这次选在了山城重庆。 重庆号称「8D魔幻城市」&#xff0c;是每一个在智驾上有抱负的头部公司&#xff0c;都想跑一跑必争之地。 这次直播长城用的智驾系统&#xff0c;也是TA序列…

Go - 8.func 函数使用

目录 一.引言 二.func 定义 三.func 实践 1.多个返回值 2.命名返回值 3.可变参数 四.总结 一.引言 函数是编程语言中的基本构建块&#xff0c;用于将代码组织成可重用的逻辑单元。函数可以接受输入参数&#xff0c;执行特定的操作&#xff0c;并返回结果。在 Go 语言&a…

25.labview数据采集中的读取和写入文本文件和Excel表格文件

①本文将会讲解labview读取和写入文本文件和Excel文件的几种不同方式&#xff0c;讲解程序的基本原理&#xff0c;并提出具体的实施方案&#xff0c;本文内容如下所示。 ②本文文章结束会提供大家 文本和表格读取写入的源程序 &#xff0c;以便于大家学习和使用。 本文中可能用…

家政小程序的开发:打造现代式便捷家庭服务

随着现代生活节奏的加快&#xff0c;人们越来越注重生活品质与便利性。在这样的背景下&#xff0c;家政服务市场迅速崛起&#xff0c;成为许多家庭日常生活中不可或缺的一部分。然而&#xff0c;传统的家政服务往往存在信息不对称、服务效率低下等问题。为了解决这些问题&#…

Windows10录屏,教你3个方法,简单快速录屏

“我的电脑系统是Windows10的系统&#xff0c;今晚要进行线上开会&#xff0c;但我实在有事没办法参加会议&#xff0c;想把会议的内容录制下来方便我后续观看。但却找不到电脑录屏功能在哪里打开&#xff1f;求助一下&#xff0c;谁能帮帮我&#xff1f;” 在数字化时代&…

Oracle - 数据库打补丁实践

原文&#xff1a;https://www.cnblogs.com/ddzj01/p/12097467.html 一、概述 本文将介绍如何给oracle数据库打最新补丁&#xff0c;数据库版本为11.2.0.4单实例&#xff0c;操作系统为redhat6.5 二、下载相关升级包 1. 登录MOS&#xff0c;查阅(ID 2118136.2)&#xff0c;下载…

编译原理1

NFA&DFA 在正规式的等价证明可以借助正规集&#xff0c;也可以通过有限自动机DFA来证明等价&#xff0c;以下例题是针对DFA证明正规式的等价&#xff0c;主要步骤是①NFA&#xff1b;②状态转换表&#xff1b; ③状态转换矩阵&#xff1b; ④化简DFA&#xff1b; 文法和语…

20240702在飞凌OK3588-C开发板上通过HDMI OUT输出USB3.0接口的热像仪的预览图像

20240702在飞凌OK3588-C开发板上通过HDMI OUT输出USB3.0接口的热像仪的预览图像 2024/7/2 18:19 rootok3588:/# rootok3588:/# rootok3588:/# lsusb Bus 005 Device 001: ID 1d6b:0002 Bus 003 Device 001: ID 1d6b:0001 Bus 001 Device 001: ID 1d6b:0002 Bus 006 Device 00…

llama-factory训练RLHF-PPO模型

理论上RLHF&#xff08;强化学习&#xff09;效果比sft好&#xff0c;也更难训练。ppo有采用阶段,步骤比较多,训练速度很慢. 记录下工作中使用llama-factory调试rlhf-ppo算法流程及参数配置,希望对大家有所帮助. llama-factory版本: 0.8.2 一 rlhf流程 ppo训练流程图如下, 会…

【Linux】—Xshell、Xftp安装

文章目录 前言一、下载Xshell、Xftp二、安装Xshell三、使用XShell连接Linux服务器四、修改windows的主机映射文件&#xff08;hosts文件&#xff09;五、远程连接hadoop102/hadoop103/hadoop104服务器六、安装Xftp 前言 XShell远程管理工具&#xff0c;可以在Windows界面下来访…

Springboot整合RedisTemplate以及业务工具类示例

docker安装Redis参考我另一篇博客Docker安装Redis及持久化 一、Get-Started 依赖 <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis --> <dependency><groupId>org.springframework.boot</groupId>…

Java_多线程:线程池

1、线程池优点&#xff1a; 降低资源消耗&#xff1a;通过重复利用已创建的线程降低线程创建和销毁造成的消耗。提高响应速度&#xff1a;当任务到达时&#xff0c;任务可以不需要等到线程创建就能立即执行。提高线程的可管理性&#xff1a;线程是稀缺资源&#xff0c;如果无限…

Django 多对多关系

多对多关系作用 Django 中&#xff0c;多对多关系模型的作用主要是为了表示两个模型之间的多对多关系。具体来说&#xff0c;多对多关系允许一个模型的实例与另一个模型的多个实例相关联&#xff0c;反之亦然。这在很多实际应用场景中非常有用&#xff0c;比如&#xff1a; 博…

因版本冲突导致logback的debug日志不打印

因框架调整&#xff0c;降级了logback的版本号&#xff0c;由1.3.12降级为1.2.11&#xff08;因框架限制&#xff0c;只能采用1.2版本&#xff09;&#xff0c;降级后发现debug日志无法打印出来&#xff0c;logback.xml配置文件不生效。后排查发现是与slf4j的版本兼容问题 依赖…