微信小程序配置上传多个u-upload上传
微信小程序配置上传多个u-upload上传
使用的是uView框架 微信小程序配置上传多个u-upload上传图片
场景需求:根据PC端配置项追加图片配置 小程序根据配置的图片数量,图片名称,进行上传图片
难度在于 我们不知道用户会追加多少个图片配置字段

分析
这里我们肯定是循环多个 u-upload 那么我们需要知道上次的地方和位置
<u-upload ></u-upload>

实现
HTML
<view class="item" :label="item.name" v-for="(item,i) in attachment" :key="i":required='item.required'><u-upload :ref="'uAttac4'" action="false" :show-tips="false" :max-count="item.size":file-list="[]" @on-remove="removeuAttac" @on-choose-complete="uAttacUpload(item.name,'imgs'+String(i),item.required)" @on-change="attacChange"></u-upload></view>
JS
- 首先从后端获取 配置追加图片的信息
async getApi() {this.attachment = [] // 初始化数组let data = await api() // 获取后端配置信息this.attachment = data.datathis.attachment.forEach((item,index)=>{this.newImgs[`imgs${index}`] = [] // 这里我们需要记录有多少个图片配置})},

- 属性
首先分析用户点击时先进行获取到 点击的是哪个配置字段的信息再进行赋值信息
通过 @on-choose-complete 先拿到点击的数据 进行记录
async uAttacUpload(name,index,required) { 这里都是记录数据用的this.imgName = indexthis.recordName = namethis.imgRequired = required}
ttacUpload(index,list){this.newImgs[this.imgName] = list // 进行赋值},
通过 @on-change 属性进行赋值
// 图片配置async attacChange(resa, index, lists,){const data = await Oss(lists[index]["url"]);if (data.code === 0) {this.newImgs[this.imgName][index].url = data.date.url // 将url地址改成 oss地址this.newAttachment.push({// 这里我们讲添加的图片存储到新的数组里面type: "image",name: this.recordName, // 做好记录url: data.date.url,}) } else {uni.showToast({title: "信息错误",icon: 'none'})}},
- 删除功能
removeuAttac(index){let newArr = []let newUrl = []this.attachment.forEach((item,index)=>{ // 拿到所有的数据newArr =[...newArr,...this.newImgs[`imgs${index}`]] })newUrl = newArr.map((item)=> { // 拿到url存到新的数组里面return item.url})this.newAttachment.forEach((item,index)=>{if(!newUrl.includes(item.url)){this.newAttachment.splice(index,1) // 找到删除掉}})},

以上就是微信小程序配置上传多个u-upload上传感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…
相关文章:
微信小程序配置上传多个u-upload上传
微信小程序配置上传多个u-upload上传 使用的是uView框架 微信小程序配置上传多个u-upload上传图片 场景需求:根据PC端配置项追加图片配置 小程序根据配置的图片数量,图片名称,进行上传图片 难度在于 我们不知道用户会追加多少个图片配置字段 …...
python使用win32com库实现对Excel的操作
使用win32com库实现对Excel的操作 1. 引言 在日常工作中,我们经常需要对Excel文件进行操作,例如读取和写入数据、格式化和样式、插入和删除等。而使用Python的win32com库,我们可以通过代码来实现对Excel的自动化操作,提高工作效…...
<Maven>项目依赖导入Maven本地仓库命令
项目工程pom.xml文件打开:查看报错的依赖, 将jar包放在D盘(或者其它路径都可)根目录下,在windows黑窗口执行以下命令; 举例:jar包名称: 1.api-1.0-SNAPSHOT102.jar 2.coms-cache-1.0-SNAPSHOT.jar 命令: mvn install:install-fi…...
爬虫006_python中的运算符_算术运算符_赋值运算符_复合赋值运算符_比较运算符_逻辑运算符_逻辑运算符性能提升---python工作笔记024
首先看加减乘除 然后看这里的 // 是取整数部分,不是四舍五入 然后%这个是取余数 然后**是,几次方那种 指数...
CPU Architecture Methodologies
MMU MMU(Memory Management Unit) 负责将逻辑地址转化为物理地址对于现代处理器来说,一般每个core都有自己的 MMU页表等数据结构保存在 TLB NUMA Non-uniform memory access (NUMA) is a computer memory design used in multiprocessing, where the memory access…...
Spring的@Scheduled
Spring的Scheduled的默认线程池数量为1,也就是说定时任务是单线程执行的。这意味着最多同时只有一个任务在执行。当一个任务还在执行时,其他任务会等待其完成,然后按照其预定的执行策略依次执行。 测试代码: 启动类上加注解Enab…...
IP隧道技术原理
简介 IP隧道技术是一种将一个协议的数据包封装在另一个协议的数据包中进行传输的技术。在网络通信中,不同的网络协议之间可能存在不兼容的情况,这时候就需要使用IP隧道技术来解决这个问题。 原理 IP隧道技术的原理是将一个协议的数据包封装在另一个协议…...
Docker私有仓库
Docker私有仓库 Docker官方的Docker hub(https://hub.docker.com)是一个用于管理公共镜像的仓库,我们可以从上面拉取镜像到本地,也可以把我们自己的镜像推送上去。但是,有时候我们的服务器无法访问互联网,…...
LLM微调 | Prefix-Tuning, Prompt-Tuning, P-tuning, P-tuning-v2
🔥 下面我只是分析讲解下这些方法的原理以及具体代码是怎么实现的,不对效果进行评价,毕竟不同任务不同数据集效果差别还是挺大的。 文章目录 0、hard prompt & soft prompt区别1、Prefix-Tuning2、Prompt-Tuning3、P-tuning4、P-tuning-v25、来看看adapter,lora,pref…...
Ansible 的脚本 --- playbook 剧本
目录 playbook 剧本 playbooks 本身由以下各部分组成 定义、引用变量 指定远程主机sudo切换用户 when条件判断 迭代 Templates 模块 1.先准备一个以 .j2 为后缀的 template 模板文件,设置引用的变量 2.修改主机清单文件,使用主机变量定义一个变…...
CSP-J模拟赛 / 买文具
限制条件 时间限制: 1000 ms, 空间限制: 256 MB 输入文件: pen.in, 输出文件:pen.out 题目描述 开学啦,为了准备新学期的课程学习,小贝到商店买文具。小贝买完文具回家,告诉妈妈说她买了钢笔、圆珠笔和铅笔总共x支,…...
leecode算法--每日一题1
二分查找 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。 前提条件必须满足: 目标数组必须是有序数组 所以…...
LViT:语言与视觉Transformer在医学图像分割
论文链接:https://arxiv.org/abs/2206.14718 代码链接:GitHub - HUANGLIZI/LViT: This repo is the official implementation of "LViT: Language meets Vision Transformer in Medical Image Segmentation" (IEEE Transactions on Medical I…...
蓝桥杯上岸每日N题 第五期(山)!!!
蓝桥杯上岸每日N题第五期 ❗️ ❗️ ❗️ 同步收录 👇 蓝桥杯Java 省赛B组(初赛)填空题 大家好 我是寸铁💪 冲刺蓝桥杯省一模板大全来啦 🔥 蓝桥杯4月8号就要开始了 🙏 距离蓝桥杯省赛倒数第3天 ❗️ ❗️ ❗️ 还没背熟模…...
IDEA Writing classes... 比较慢
IDEA配置修改如下: 1、File -> Settings… 2、Build,Execution,Deployment -> Compiler Build process heap size 配置为 20483、Build,Execution,Deployment -> Compiler -> ActionScript & Flex C…...
opencv中轮廓相关属性
一、介绍 findContours() :The function retrieves contours from the binary image。 二、代码 void main() {Mat src imread("match00.bmp", IMREAD_GRAYSCALE);Mat mask;threshold(src, mask, 128, 255, cv::THRESH_BINARY_INV);Mat element cv::g…...
Leetcode 144. 二叉树的前序遍历
题目描述 题目链接:https://leetcode.cn/problems/binary-tree-preorder-traversal/description/ 代码实现 class Solution {List<Integer> l new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {preoder(root);re…...
医学影像PACS系统源码:多功能服务器和阅片系统
PACS系统是以最新的IT技术为基础,遵循医疗卫生行业IHE/DICOM3.0和HL7标准,开发的多功能服务器和阅片系统。通过简单高性能的阅片功能,支持繁忙时的影像诊断业务,拥有保存影像的院内Web传输及离线影像等功能,同时具有备…...
php 生成连续递增的Excel列索引 可以控制多少列
今天遇到需要生成对应的下拉,下拉的类 需要PHP 输出一个数组 如 A、B、C、D 到Z 列后 Excel 的列就变成 AA 、AB、 AC 依次类推 查询得知 Excel 最大列数 16384 最大行数 1048576 下面演示3000列或行 <?php$idx [idx > 0];for ($i …...
Openstack等私有云
1 OpenStack 计算:部署管理虚拟机存储:块存储 Cinder 和 对象存储 Swift网路:管理网络身份:管理用户和权限镜像:管理镜像用于快速部署新的虚拟机仪表盘:Web界面 2 RAID 如果使用的软件已经在多个硬件设备…...
[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
