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

news2024/11/19 21:27:12

代码:

<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>

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

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

相关文章

WPF自定义模板--TreeView 实现菜单连接线

有些小伙伴说&#xff0c;在TreeView中&#xff0c;怎么每一个都加上连接线&#xff0c;进行显示连接。 代码和效果如下&#xff1a; 其实就是在原来的模板中增加一列显示线条&#xff0c;然后绘制即可 <Window x:Class"XH.TemplateLesson.TreeViewWindow"xmln…

无法定位程序输入点Z9 qt assertPKcS0i于动态链接库F:\code\projects\06_algorithm\main.exe

解决方法&#xff1a; 这个报错&#xff0c;是因为程序在运行时没要找到所需的dll库&#xff0c;如果把这个程序方法中对应库的目录下执行&#xff0c;则可正常执行。即使将图中mingw_64\bin 环境变量上移到msvc2022_64\bin 之前也不可以。 最终的解决方法是在makefile中设置环…

vue组件深入介绍之插槽

了解插槽之前请先了解vue组件基础及注册 Vue2官网介绍 Vue3官网介绍 1、vue2插槽介绍 在2.6.0中&#xff0c;具名插槽和作用域插槽引入了一个新的统一语法&#xff08;v-slot指令&#xff09;。它将取代slot和slot-scope&#xff1b; Vue 实现了一套内容分发的 API&#xf…

等保2.0 实施方案之信息软件验证要求

一、等保2.0背景及意义 随着信息技术的快速发展和网络安全威胁的不断演变&#xff0c;网络安全已成为国家安全、社会稳定和经济发展的重要保障。等保2.0&#xff08;即《信息安全技术 网络安全等级保护基本要求》2.0版本&#xff09;作为网络安全等级保护制度的最新标准&#x…

Revit 专业实用的BIM模型设计软件下载安装,Revit 最新版下载安装

Revit&#xff0c;该软件是专门为建筑信息模型&#xff08;BIM&#xff09;量身打造的&#xff0c;不仅极大提升了建筑设计师的工作效率&#xff0c;更为他们创造了一个更加精确、高效的设计环境。 在Revit的助力下&#xff0c;建筑设计师们能够轻松地进行建筑建模&#xff0c…

AI:开发者的助力还是终结者?

作为一名科技工作研发者&#xff0c;在科技浪潮汹涌澎湃的当下&#xff0c;AI 对于开发者的角色定位成为了一个备受瞩目的焦点话题。 AI 是在助力开发者&#xff0c;还是会取而代之&#xff1f;让我们从技术的角度深入剖析。 不可否认&#xff0c;AI 为开发者带来了前所未有的便…

Django QuerySet对象,all()方法

all()方法 在Django中&#xff0c;all()方法是QuerySet对象的一个方法&#xff0c;用于获取模型的所有实例。 当你调用ModelName.objects.all()时&#xff0c;Django会生成一个SQL查询&#xff0c;从数据库中获取该模型的所有记录&#xff0c;并返回一个QuerySet对象&#xf…

uniapp + vite中 uni.scss 使用 /deep/ 不生效(踩坑记录三)

vite 中使用 /deep/ 进行样式穿透报错 原因&#xff1a;vite 中不支持&#xff0c;换成 ::v-deep 或:deep即可

创建kset

1、kset介绍 2、相关结构体和api介绍 2.1 struct kset 2.2 kset_create_and_add kset_create_and_addkset_createkset_registerkobject_add_internalkobject_add_internal2.3 kset_unregister kset_unregisterkobject_delkobject_put3、实验操作 #include<linux/module.…

【MySQL8.0】 CentOS8.0下安装mysql报错权限问题的记录

这里写自定义目录标题 基本信息问题记录 基本信息 OS: Linux server-02 4.18.0-240.el8.x86_64 #1 SMP Fri Sep 25 19:48:47 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux MySQL: 8.0 问题记录 缺少类库 mysql: error while loading shared libraries: libncurses.so.5: cannot…

泛型 + 反射 + 注解 + 动态代理 + 设计模式 + Factory(BeanFactory,FactoryBean)

1.泛型 编译器可以对泛型参数进行检测&#xff0c;并且通过泛型参数可以指定传入的对象类型。比如 ArrayList<Person> persons new ArrayList<Person>() 这行代码就指明了该 ArrayList 对象只能传入 Person 对象&#xff0c;如果传入其他类型的对象就会报错。 原…

周周星分享7.3—基于气象大数据的自动站实况联合预测

赛题 2024中国高校计算机大赛 — 大数据挑战赛 经验分享 大家好&#xff0c;我是扫地僧团队的队长&#xff0c;以前参加这样打榜的比赛比较少&#xff0c;了解的打榜技巧不是太多&#xff0c;所以想从科研的角度给大家一点分享。 这次比赛主要从以下五个步骤进行&#xff1a…

全网最详细金融APP测试功能点-测试用例,详细整理(全)

2024软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;-CSDN博客跳槽涨薪的朋友们有福了&#xff0c;今天给大家推荐一个软件测试面试的刷题小程序。https://blog.c…

660错题

不能局部求导,局部洛必达

IO多路复用学习

Linux中的I/O多路复用 相关基础概念 在学习I/O多路复用之前&#xff0c;先学习一些相关的基础概念&#xff0c;便于理解。 内核缓冲区和用户缓冲区 &#x1f62e; CPU 上会运行两种程序&#xff0c;一种是操作系统的内核程序&#xff08;也称为系统程序&#xff09;&#x…

[OC]萝卜圈Python手动游戏

小游戏示意图 游戏规则 1.wasd上下左右移动 2.玩家一次可以移动1-3随机距离&#xff0c;人机一次移动1格或斜着移 3.玩家需要躲避人机追杀 4.当出现如图所示情况时——你输了 5.墙&#xff08;概率通过&#xff0c;对人机无效&#xff09; 难度可根据代码自己调&#xff…

python - 列表 / 元组 / 字符串

一.列表 由于pyhon的变量没有数据类型&#xff0c;所以python是没有数组的&#xff08;因为数组只能存放一种类型&#xff0c;要么全部存放整型&#xff0c;要么全部存放浮点型&#xff09;&#xff0c;只有列表list&#xff0c;所以整数&#xff0c;浮点数&#xff0c;字符串…

机械设备制造企业MES系统解决方案介绍

机械设备制造行业涵盖了各类工业设备、工程机械、农业机械等多个领域&#xff0c;对生产精度、质量控制和效率提出了较高要求。为了提升生产效率、保证产品质量并满足客户需求&#xff0c;越来越多的机械设备制造企业引入了MES系统。本文将详细介绍MES系统在机械设备制造行业的…

【嵌入式DIY实例-ESP8266篇】-LCD ST7735显示网络时间

LCD ST7735显示网络时间 文章目录 LCD ST7735显示网络时间1、硬件准备2、代码实现本文将介绍如何使用 ESP8266 NodeMCU Wi-Fi 板实现互联网时钟,其中时间和日期显示在 ST7735 TFT 显示屏上。 ST7735 TFT是一款分辨率为128160像素的彩色显示屏,采用SPI协议与主控设备通信。 1…

Vue前端练习

此练习项目只涉及前端&#xff0c;主要是vue和ElementUI框架的使用。&#xff08;ElementUI官网&#xff1a;Element - The worlds most popular Vue UI framework&#xff09; 一、环境准备 安装idea 安装Node.js 一键式安装(不需要做任何配置) npm -v&#xff08;也可用nod…