Vue3:uv-upload图片上传
效果图:
参考文档:
Upload 上传 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架 (uvui.cn)
代码:
<view class="greenBtn_zw2" @click="handleAddGroup">添加班级群</view>
//添加班级群const handleAddGroup = () => {addDialog.value.open();};
<!-- 添加班级群弹窗 --><uv-popup ref="addDialog" mode="center" :customStyle="dialogStyle2" :closeOnClickOverlay="false"><view class="dialogBG"><view class="dialog-all"><view class="dialog-small-close" @click="cancelRoom"><uv-icon name="close-circle-fill" size="28" color="#B1B1B1"></uv-icon></view><view class="dialog-center"><view class="dialog-title pb-10">班级群</view><view class="diaText">班级群名称</view><uv-input maxlength="10" placeholder="请输入班级群名称" border="surround" clearable v-model="addGroup.info.groupName"></uv-input><view class="diaText statusD">群二维码<view class="gray_s"><text style="margin-right: 38rpx; font-size: 28rpx; color: #555555">状态</text><uv-switch v-model="addGroup.info.status" size="20" activeColor="#287e66" inactive-color="#c0c0c0" asyncChange @change="changeValue"></uv-switch></view></view><view class="m-flex" style="align-items: center"><uv-upload:fileList="fileList"name="fileList":maxCount="1"@afterRead="afterRead"@delete="deletePic"width="360rpx"height="360rpx":customStyle="{ width: '360rpx', height: '360rpx', marginBottom: '40rpx', display: 'flex', alignItems: 'center' }"></uv-upload></view><view class="dialog_footer1 displayFlexSB"><view class="common-sure-btn-1" @click="confirmRoom()">确定</view><view class="common-sure-btn-2" @click="cancelRoom()">取消</view></view></view></view></view></uv-popup>
<script setup lang="ts"> import { onLoad, onShow } from '@dcloudio/uni-app';import { ref, reactive, toRefs, onMounted, defineComponent } from 'vue';import { getFirstPage, getFirstClass, sessionUpdate, sessionCreate, sessionDelete } from '@/apis/vocabulary.ts'; const dialogStyle2 = reactive({ width: '597rpx', height: '855rpx', background: '#FFFFFF', borderRadius: '48rpx' });const addGroup = reactive<object>({ info: { groupName: '', status: true } });const fileList = ref([]);const validateClassForm = () => {if (addGroup.info.groupName == '') {toast.value.show({ message: '请输入班级群名称', success: false });return false;}if (addGroup.info.groupName.trim().length >= 11) {toast.value.show({ message: '班级群名称不能超过10个字符', success: false });return false;}if (fileList.value.length < 1) {toast.value.show({ message: '请上传群二维码', success: false });return false;}return true;};//关闭/取消 弹框按钮方法const cancelRoom = () => {addGroup.info = {groupName: '',status: true};fileList.value = [];addDialog.value.close();};//是否切换switch进行状态推送const changeValue = (e: any) => {uni.showModal({content: e ? `确定要开启${addGroup.info.groupName}吗` : `确定要关闭${addGroup.info.groupName}吗`,success: (res) => {if (res.confirm) {addGroup.info.status = e;console.log('e------', addGroup.info.status);}}});};//图片上传方法//afterRead读取后的处理函数const afterRead = async (event: any) => {// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式let lists = [].concat(event.file);let fileListLen = fileList.value.length;lists.map((item) => {fileList.value.push({...item,status: 'uploading',message: '上传中'});});for (let i = 0; i < lists.length; i++) {const result = await uploadFilePromise(lists[i].url);// console.log(result, '1111111111111111');let item = fileList.value[fileListLen];fileList.value.splice(fileListLen,1,Object.assign(item, {status: 'success',message: '',url: result ? result : ''}));fileListLen++;}};const uploadFilePromise = (url) => {return new Promise((resolve, reject) => {let a = uni.uploadFile({// url: `${config.baseURL}/zx/common/uploadFile`, // 仅为示例,非真实的接口地址url: 'https://baiduway.baijy.com/zx/common/uploadFile', // 仅为示例,非真实的接口地址filePath: url,name: 'file',// formData: {// user: 'test'// },header: {Token: uni.getStorageSync('token')},success: (res) => {let result = JSON.parse(res.data);setTimeout(() => {resolve(result.data.fileUrl);}, 1000);}});});};// 删除图片const deletePic = (event: any) => {console.log(event);console.log('fileList.value', fileList.value);console.log('fileList${event.name}', `fileList${event.name}`);// fileList[event.name]fileList.value.splice(event.index, 1);// this[`fileList${event.name}`].splice(event.index, 1);};//确定方法const confirmRoom = () => {if (validateClassForm()) {let obj = {groupName: addGroup.info.groupName,status: addGroup.info.status ? 1 : 0,qrcodeUrl: fileList.value[0].url};addGroupList(obj).then((res: any) => {if (res.success) {toast.value.show({ message: '班级群添加成功', success: true });getclassList();cancelRoom();} else {toast.value.show({ message: res.message, success: false });}});}};</script>
相关文章:
Vue3:uv-upload图片上传
效果图: 参考文档: Upload 上传 | 我的资料管理-uv-ui 是全面兼容vue32、nvue、app、h5、小程序等多端的uni-app生态框架 (uvui.cn) 代码: <view class"greenBtn_zw2" click"handleAddGroup">添加班级群</vie…...
VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL
我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…...
redis使用注意哪些事项
1. 数据类型选择: • Redis支持多种数据类型,如字符串(String)、哈希(Hash)、列表(List)、集合(Set)、有序集合(Sorted Set)等。在选择…...
Go使用sqlx操作MySQL完整指南
# Go使用sqlx操作MySQL完整指南## 1. 安装依赖bash go get github.com/go-sql-driver/mysql go get github.com/jmoiron/sqlx2. 数据库基础操作 package mainimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx" )// 定…...
计算机基础复习12.23
ThreadLocal 线程隔离:ThreadLocal为每个线程提供了独立的变量副本,意味着线程之间不会相互影响,可以安全的在多线程环境中使用这些变量而不必担心数据竞争或同步问题 ThreadLocal的实现依赖于Thread类中的一个ThreadLocalMap字段ÿ…...
Jenkins介绍
Jenkins 是一款流行的开源自动化服务器,在软件开发和持续集成 / 持续交付(CI/CD)流程中发挥着关键作用。 一、主要功能 1.持续集成(CI) (1).自动构建:Jenkins 可以配置为监听代码仓…...
RK3588 , mpp硬编码yuv, 保存MP4视频文件.
RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ Ubuntu x64 架构, 交叉编译aarch64 FFmpeg mppRK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBRK3588 , mpp硬编码yuv, 保存MP4视频文件....
Delphi WebBrowser 基本操作与常见问题的解决方案
前言 WebBrowser 作为Delphi 常见的网络浏览控件,我这里整理了一些它的基本操作,遇到了一些问题,我梳理了一下并给出解决方案 基本操作 WebBrowser1.GoHome; //到浏览器默认主页 WebBrowser1.Refresh; //刷新 WebBrowser1.GoBack; //后退 Web…...
【更新】LLM Interview
课程链接:BV1o217YeELo 文章目录 LLM基础相关1. LLMs概述2. 大语言模型尺寸3. LLMs的优势与劣势4. 常见的大模型分类5. 目前主流的LLMs开源模型体系有哪些(Prefix Decoder,Causal Decoder,Encoder-Decoder的区别是什么)…...
从零开始C++棋牌游戏开发之第一篇:C++ 游戏开发环境搭建与工具简介
前言:作者的感想 每一次选择开始一项新技能的学习,总会让人感到既兴奋又有些许忐忑。C 游戏开发,尤其是针对棋牌类游戏规则实现的开发,更是一个有趣而充满挑战的领域。作为一名开发者,我深知面对 C 时的那种 "既…...
Hydrogen-Web 项目常见问题解决方案
Hydrogen-Web 项目常见问题解决方案 hydrogen-web Lightweight matrix client with legacy and mobile browser support [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/hy/hydrogen-web 项目基础介绍 Hydrogen-Web 是一个轻量级的 Matrix 客户端,专…...
LabVIEW中的“Synchronize with Other Application Instances“
在LabVIEW中,“Synchronize with Other Application Instances”是一个常见的提示或错误,通常出现在尝试并行运行多个LabVIEW实例时,特别是当你打开多个VI或项目时。这个问题可能影响程序的执行流程,导致不同实例之间的数据同步或…...
Hslcommunication通讯调用
Vs2022选择配置属性选择高级语言运行时(/clr);符合模式选择否;引用选择Hslcommunication.dll和HslCppExtension.dll; Demo #include <iostream> using namespace HslCommunication; using namespace HslCommunication::Core::Net; using namespace HslCommunication::Mo…...
渐进式 Web 应用程序:新的 FE 系统
在企业环境中,我们通常认为稳定的互联网连接是理所当然的。然而,现实世界的条件经常挑战这一假设,可能会中断关键业务运营。本文详细介绍了我们如何将传统的纯在线 ERP 系统转变为具有弹性、支持离线的解决方案的更可靠的系统。通过利用基于浏…...
安科瑞能源物联网平台在老旧小区用电安全改造中的应用与优势
安科瑞 吕梦怡 一、现状 老旧住宅小区普遍存在建成时间久远的情况,其电力系统刚开始的设计标准已难以匹配当下居民不断攀升的用电需求。电力基础设施老化现象较为突出,例如电线的绝缘层出现破损、电表箱被锈蚀以及配电设备超期服役等问题比比皆是。小…...
[Effective C++]条款36-37 两个绝不
本文初发于 “天目中云的小站”,同步转载于此。 条款36 : 绝不重新定义继承而来的non-virtual函数 本条款很容易理解, 援引以前的条款就可以说明为什么 : 条款34中就提到过 : non-virtual函数意味着接口 强制性实现继承, 它不应当被改变. 重新定义继承而来的non-…...
MySQL数据库——复制表数据与结构
命令格式 create table 表名 select 字段1,字段2 from 被复制表 首先新建一个表,然后从被复制的表中选择字段复制到新表 举例...
一文掌握如何编写可重复执行的SQL
一文掌握如何编写可重复执行的SQL 文章已同步个人博客:一文掌握如何编写可重复执行的SQL 背景 先提出问题,这里的可重复执行是指什么?我们为什么要编写可重复执行的sql? 可重复执行是指一条sql重复多次执行都不会报错…...
编译笔记:vs 中 正在从以下位置***加载符号 C# 中捕获C/C++抛出的异常
加载符号 解决方法: 进入VS—工具—选项----调试----符号,看右边有个“Microsoft符号服务器”,将前面的勾去掉,(可能还有删除下面的那个缓存)。 参考 C# 中捕获C/C抛出的异常 在需要捕捉破坏性异常的函数…...
[搜广推]王树森推荐系统——Deep Retrieval 召回
Deep Retrieval 简介 Deep Retrieval 是一种推荐系统框架,它将物品表示为路径(path),并在线上查找与用户最匹配的路径。 这种方法与传统的双塔模型不同,后者通常将用户和物品表示为向量,并在线上进行最近邻…...
【深入解析蓝牙dumpsys bluetooth_manager 命令输出】
了解蓝牙的工作状态以及如何在测试中利用这些信息。 1. Bluetooth Status(蓝牙状态) enabled: true state: ON address: 00:00:00:00:43:36 name: 小米手机 time since enabled: 00:15:18.492enabled: true — 蓝牙功能已启用。state: ON — 蓝牙目前是开启状态。address: …...
【三】Fast-DDS hello world!
编译hello world # 进入到源码目录 mkdir -p examples/cpp/hello_world/build cd examples/cpp/hello_world/build cmake .. && make -j4运行publisher ./hello_world publisher 运行subscriber ./hello_world subscriber 结果...
将HTML转换为PDF:使用Spire.Doc的详细指南(一) 试用版
目录 引言 1. 为什么选择 Spire.Doc? 1.1 主要特点 1.2 适用场景 2. 准备工作 2.1 引入 Spire.Doc 依赖 2.2 禁用 SSL 证书验证 3. 实现功能 3.1 主类结构 3.2 代码解析 4. 处理图像 5. 性能优化 5.1 异步下载图像 示例代码 5.2 批量处理优化 示例代…...
【物联网技术与应用】实验10:蜂鸣器实验
实验10 蜂鸣器实验 【实验介绍】 蜂鸣器是音频信号装置。蜂鸣器可分为有源蜂鸣器和无源蜂鸣器。 【实验组件】 ● Arduino Uno主板* 1 ● USB数据线* 1 ● 有源蜂鸣器* 1 ● 无源蜂鸣器* 1 ● 面包板* 1 ● 9V方型电池* 1 ● 跳线若干 【实验原理】 如图所示&#x…...
【python高级】342-TCP服务器开发流程
CS模式:客户端-服务端模式 TCP客户端开发流程介绍(五步)(C端) 1.创建客户端套接字对象 2.和服务端套接字建立连接 3.发送数据 4.接收数据 5.关闭客户端套接字 TCP服务端开发流程(七步)…...
C++开源项目 VLC 源代码的交叉编译以及库的裁剪方法详解
目录 1、VLC简介 2、VLC编译环境配置 2.1、编译环境 2.2、编译环境配置 2.2.1、下载安装MSYS2 2.2.2、下载mingw-w64 3、编译VLC 4、VLC库的裁剪 5、总结 C软件异常排查从入门到精通系列教程(核心精品专栏,订阅量已达600多个,欢迎订…...
draw.io 导出svg图片插入word后模糊(不清晰 )的解决办法
通常我们将图片从draw.io导出为svg格式后插入word, 会发现字体不清晰,特别是使用宋体时,折腾了半天,得到如下办法: 方法1: 在draw.io中导出pdf文件,使用 PDF转SVG转换器 - SVGConverter 将其转换为svg, 完美呈现。 …...
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
目录 详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用 一、什么是柯里化? 1、原理解析 2、一个直观的例子 二、如何实现柯里化? 1、底层实现 2、工作原理解析 3…...
Cesium材质——Material
简介: Cesium.Material对象的目的,就是生成一段名称为czm_getMaterial的函数(示例代码如下), 这个czm_getMaterial函数,是shader代码,会被放到片元着色器中使用。 czm_material czm_getMater…...
《点点之歌》“意外”诞生记
世界是“点点”的,“点点”是世界的。 (笔记模板由python脚本于2024年12月23日 19:28:25创建,本篇笔记适合喜欢诗文的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ Free:大咖免费“圣经”教程《 …...
统计某个文件中某个字符串出现的次数
要统计某个文件中某个字符串出现的次数,有多种方法可以实现。以下是几种常用且高效的 Linux 命令方法: 方法一:使用 grep 和 wc 命令示例: grep -o "字符串" 文件名 | wc -l说明: grep -o "字符串&…...
C++简明教程(文章要求学过一点C语言)(3)
一、编程工具大揭秘——IDE 当我们准备踏入 C 编程的奇妙世界时,首先要认识一个重要的“魔法盒子”——集成开发环境(IDE)。IDE 就像是一个全能的编程工作室,它把我们写代码所需要的各种工具都整合到了一起,让编程这件…...
Springboot高并发乐观锁
Spring Boot分布式锁的主要缺点包括但不限于以下几点: 性能开销:使用分布式锁通常涉及到网络通信,这会引入额外的延迟和性能开销。例如,当使用Redis或Zookeeper实现分布式锁时,每次获取或释放锁都需要与这些服务进行交…...
编译原理复习---正则表达式+有穷自动机
适用于电子科技大学编译原理期末考试复习。 1. 正则表达式 正则表达式(Regular Expression,简称regex或regexp)是一种用于描述、匹配和操作文本模式的强大工具。它由一系列字符和特殊符号组成,这些字符和符号定义了一种搜索模式…...
如何使用ChatGPT辅助文献综述,以及如何进行优化?一篇说清楚
目录 1.写在开头 2.ChatGPT 3.提示词研究 4.第一轮研究 5.第二轮研究 6.生成文献综述 嘿宝子们!今天我们要聊的,可是个让学术圈都为之振奋的话题——ChatGPT辅助文献综述。这个教育界的新宠儿,已经不满足于仅仅在学习和教学中露两手了&…...
ZZNUOJ 1601:字母序号(C/C++/Java)
题目描述 我们把字母 A-Z 分别编号为 1-26, 现在给你一个大写字母, 输出这个大写字母的序号。 输入 输入一个大写字母 输出 输出这个大写字母的序号 样例输入 C 样例输出 3 常见的ASCII值 ASCII表中可以记下部分特殊的值(十进制)(字母从A到Z,从a到z,ASCII值依次递增)...
[CISCN 2021初赛]rsa
[CISCN 2021初赛]rsa 源代码: from flag import text,flag import md5 from Crypto.Util.number import long_to_bytes,bytes_to_long,getPrimeassert md5.new(text).hexdigest() flag[6:-1]msg1 text[:xx] msg2 text[xx:yy] msg3 text[yy:]msg1 bytes_to_lo…...
Electron -- Electron Fiddle(一)
Electron Fiddle 是一个由 Electron 团队开发的开源工具,它允许开发者快速创建、运行和调试 Electron 应用。这个工具提供了一个简洁的界面,使用户无需配置复杂的开发环境,就能快速体验和学习 Electron。强烈建议将其安装为学习工具。 学习它…...
java 实现排序的几种方式
冒泡排序(Bubble Sort) 基本原理: 它重复地走访要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。 示例代码如下: 登…...
【机器学习与数据挖掘实战】案例06:基于Apriori算法的餐饮企业菜品关联分析
【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈机器学习与数据挖掘实战 ⌋ ⌋ ⌋ 机器学习是人工智能的一个分支,专注于让计算机系统通过数据学习和改进。它利用统计和计算方法,使模型能够从数据中自动提取特征并做出预测或决策。数据挖掘则是从大型数据集中发现模式、关联…...
陀螺仪选型
瑞芬官网 datasheet 陀螺仪、IMU姿态仪、陀螺转角仪、三轴姿态仪、三轴陀螺仪 mid360 imu ICM-40609-D TDK InvenSense | Mouser https://product.tdk.com/system/files/dam/doc/product/sensor/mortion-inertial/imu/data_sheet/ds-000330_icm-40609-d_v1.2.pdf...
【超详细实操内容】django的身份验证系统之限制用户访问的三种方式
目录 1、使用request.user.is_authenticated属性 2、装饰器login_required 3、LoginRequiredMixin类 通常情况下,网站都会对用户限制访问,例如,未登录的用户不可访问用户中心页面。Django框架中使用request.user.isauthenticated属性、装饰器loginrequired和LoginRequire…...
Pika Labs技术浅析(六):自动化技术
Pika Labs 的自动化技术旨在通过工作流引擎和自动化警报系统,帮助用户实现业务流程的自动化和实时监控。 一、自动化技术模块概述 Pika Labs 的自动化技术模块旨在通过以下两个核心组件,实现业务流程的自动化和实时监控: 1.工作流引擎&…...
springboot471基于协同过滤算法商品推荐系统(论文+源码)_kaic
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装协同过滤算法商品推荐系统软件来发挥其高效地信息处理的作用…...
【YashanDB知识库】jdbc查询st_geometry类型的数据时抛出YAS-00101错误
本文内容来自YashanDB官网,原文内容请见 https://www.yashandb.com/newsinfo/7802956.html?templateId1718516 问题现象 某客户的业务在通过YashanDB jdbc驱动查询含有st_geometry列的数据时,报如下异常:YAS-00101 cannot allocate 0 byte…...
ajax中get和post的区别,datatype返回的数据类型有哪些?web开发中数据提交的几种方式,有什么区别。
在 Web 开发中,GET 和 POST 是两种常见的 HTTP 请求方法,它们有一些显著的区别。此外,datatype 参数在 jQuery 的 ajax() 请求中指定了预期的响应数据类型。接下来,我会详细解释这些问题。 1. GET 和 POST 请求的区别 GET 请求 和…...
EKF异常状态自检
https://wenku.csdn.net/column/25p1jkf4vz https://www.zhihu.com/question/293038308/answers/updated https://zhuanlan.zhihu.com/p/12011086094 常用数据分析方法:方差分析及实现!-腾讯云开发者社区-腾讯云 方差分析的七种类型_双因素方差分析 自变…...
《解析 MXNet 的 C++版本在分布式训练中的机遇与挑战》
在深度学习的广袤领域中,分布式训练已成为应对大规模数据和复杂模型训练需求的关键手段。MXNet 作为一款备受瞩目的深度学习框架,其 C版本在分布式训练方面展现出独特的魅力,同时也面临着诸多挑战。深入探究这些优势与挑战,对于推…...
UVM学习总结
问题1:同时出现几个相同的uvm_config_de()哪个有效? UVM中的配置对象是通过uvm_config_db类实现的。uvm_config_db类使用一对名称和值来存储配置信息。当多个uvm_config_db.call()调用同时提供相同名称的配置时,最后一个调用将覆盖之前的调用…...
TCP/IP 介绍:网络通信的基石
TCP/IP 介绍:网络通信的基石 计算机通信协议概述 在数字时代,计算机之间的通信变得至关重要。计算机通信协议(Computer Communication Protocol)是一套规则,定义了计算机如何相互交流信息。这些协议确保了不同制造商…...