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

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

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

相关文章

Halcon OCR字符识别(极坐标转换,字符识别)

Halcon OCR字符识别&#xff08;极坐标转换&#xff0c;字符识别&#xff09; 代码 * 1.加载图片 *************************************************** dev_close_window () read_image (Image, ./img) get_image_size (Image, Width, Height) dev_get_window (WindowHandle…

PyCharm

一、介绍 PyCharm 是 JetBrains 公司开发的一款功能强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它专为 Python 开发设计&#xff0c;提供了一系列强大的工具和功能&#xff0c;帮助开发者更高效地编写、调试和维护 Python 代码。以下是对 PyCharm 的详细介绍&am…

MySQL之备份与恢复(六)

备份与恢复 文件系统快照 先决条件和配置 创建一个快照的消耗几乎微不足道&#xff0c;但还是需要确保系统配置可以让你获取在备份瞬间的所有需要的文件的一致性副本。首先&#xff0c;确保系统满足下面这些条件。 1.所有的InnoDB文件(InnoDB的表空间文件和InnoDB的事务日志…

数据结构——(双)链表

文章目录 1. 定义 2. 双链表和单链表的区别 3. 代码示例 3.1 双链表节点和结构定义 3.2 初始化双链表 3.3 返回双链表的长度 3.4 在指定位置插入元素 3.5 在末尾插入元素 3.6 删除指定位置的元素并返回被删除的元素 3.7 删除末尾元素 3.8 获取指定位置的元素 3.9 修…

maven项目使用netty,前端是vue2,实现通讯

引入的java包 <!-- 以下是即时通讯--><!-- Netty core modules --><dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.76.Final</version> <!-- 使用最新的稳定版本…

Docker:三、安装nginx与tomcat

&#x1f341;安装常见服务 &#x1f332;安装nginx &#x1f9ca;1、搜索镜像 Ⅰ.hub docker上查询&#xff1a;https://hub.docker.com/_/nginx Ⅱ. 命令查询&#xff1a;docker search nginx &#x1f9ca;2、下载镜像 命令&#xff1a;docker pull nginx &#x1f9c…

应用了网络变压器的PC网卡连接转换器后不好连网,有掉线现象,但外接路由器无问题,可能是什么原因?

Hqst盈盛&#xff08;华强盛&#xff09;电子导读&#xff1a;今天分享的是应用了网络变压器的PC网卡连接转换器后不好连网&#xff0c;有掉线现象&#xff0c;但外接路由器无问题&#xff0c;可能是什么原因呢&#xff1f;如何解决呢&#xff1f; 首先&#xff0c;我们要了解传…

PMP–知识卡片--PDCA循环

记忆 PDCA&#xff1a;计划执行检查调整&#xff0c;计划观察动作&#xff1b;plan do check action 定义 PDCA循环的含义是将质量管理分为四个过程&#xff0c;即计划&#xff08;Plan&#xff09;、执行&#xff08;Do&#xff09;、检查&#xff08;Check&#xff09;、处…

使用maven搭建一个SpingBoot项目

1.首先创建一个maven项目 注意选择合适的jdk版本 2.添加依赖 2.在pom.xml中至少添加依赖 spring-boot-starter-web 依赖&#xff0c;目的是引入Tomcat&#xff0c;以及SpringMVC等&#xff0c;使项目具有web功能。 <!-- 引入 包含tomcat&#xff0c;SpringMVC&#xff0c…

一文了解常见DNS问题

当企业的DNS出现故障时&#xff0c;为不影响企业的正常运行&#xff0c;团队需要能够快速确定问题的性质和范围。那么有哪些常见的DNS问题呢&#xff1f; 域名解析失败&#xff1a; 当您输入一个域名&#xff0c;但无法获取到与之对应的IP地址&#xff0c;导致无法访问相应的网…

HTTP代理服务器:深度解析与应用

“随着互联网的飞速发展&#xff0c;HTTP代理服务器在网络通信中扮演着越来越重要的角色。它们作为客户端和服务器之间的中介&#xff0c;不仅优化了网络性能&#xff0c;还提供了强大的安全性和隐私保护功能。” 一、HTTP代理服务器的概念与作用 HTTP代理服务器是一种能够接…

win11如何关闭自动更新,延长暂停更新时间

网上有很多关闭自动更新的方法&#xff0c;今天给大家带来另一种关闭win11自动更新的方法。 1.winR打开运行窗口&#xff0c;输入regedit打开注册表 2.定位到以下位置&#xff1a; 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 3.右键右边空白&…

实验四 图像增强—灰度变换之直方图变换

一&#xff0e;实验目的 1&#xff0e;掌握灰度直方图的概念及其计算方法&#xff1b; 2&#xff0e;熟练掌握直方图均衡化计算过程&#xff1b;了解直方图规定化的计算过程&#xff1b; 3&#xff0e;了解色彩直方图的概念和计算方法 二&#xff0e;实验内容&#xff1a; …

jenkins搭建部署前端工程 ,从0到1

一.java环境配置 1 安装tomcatjdk17 这个也行 3 安装maven3.3.9 安装教程参考 4 安装Jenkins 下载地址 参考教程 二、相关配置 1 访问http://localhost:8080/jenkins&#xff0c;进入Jenkins初始化页面&#xff0c;第一次启动时间可能有点长&#xff0c;耐心等待。进入成功后会…

vue3自定义全局指令和局部指令

1.全局指令 el&#xff1a;指令绑定到的DOM元素&#xff0c;可以用于直接操作当前元素&#xff0c;默认传入钩子的就是el参数&#xff0c;例如我们开始实现的focus指令&#xff0c;就是直接操作的元素DOM binding&#xff1a;这是一个对象&#xff0c;包含以下属性&#xff1a;…

2.5 C#视觉程序开发实例1----IO_Manager实现切换程序

2.5 C#视觉程序开发实例1----IO_Manager实现切换程序 1 IO_Manager中输入实现 1.0 IO_Manager中输入部分引脚定义 // 设定index 目的是为了今后可以配置这些参数、 // 输入引脚定义 private int index_trig0 0; // trig index private int index_cst 7; //cst index priva…

element-ui Tree之懒加载叶子节点强制设置父级半选效果

效果&#xff1a; 前言&#xff1a; 我们是先只展示一级的&#xff0c;二级的数据是通过点击之后通过服务器获取数据&#xff0c;并不是全量数据直接一起返回回来的。 问题&#xff1a; 当你设置了默认选中的子节点&#xff0c;但是由于刚进入页面此时tree中数据暂是没有这个…

【C++题解】1561. 买木头

问题&#xff1a;1561. 买木头 类型&#xff1a;省赛、数组问题、二分答案、贪心、2015江苏省青少年信息学奥林匹克竞赛复赛 题目描述&#xff1a; 有 n 个木材供应商&#xff0c;每个供货商有长度相同一定数量的木头。长木头可以锯短&#xff0c;但短木头不能接长。有一个客…

解决obsidian加粗中文字体显示不突出的问题

加粗字体显示不突出的原因&#xff1a;默认字体的加粗版本本来就不突出 解决方法&#xff1a;改成显示突出的类型Microsoft YaHei UI 【效果】 修改前&#xff1a;修改后&#xff1a; 其他方法&#xff1a; 修改css&#xff08;很麻烦&#xff0c;改半天也不一定奏效&#…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【19】认证服务03—分布式下Session共享问题

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【19】分布式下Session共享问题 session原理分布式下session共享问题Session共享问题解决—session复制Session共享问题解决—客户端存储Session共享问题解决—hash一致性Session共享问题…