uniapp uview1.0 页面多个upload上传、回显之后处理数据

<view class="img-title w-s-color-3 f-28 row">商品图片</view>

<u-upload ref="images" :header="header"  :file-list="fileListImages" :action="action" name="iFile" icon-name="camera"
	upload-text="上传图片"></u-upload>

<view class="img-title w-s-color-3 f-28 row">商品详情图片</view>

<u-upload ref="content" :header="header" :file-list="fileListCotent" :action="action" name="iFile" icon-name="camera" upload-text="上传图片"></u-upload>

html结构如上,定义两种ref  'images'  ,'content' 

在提交的时候将两种ref形成数组进行循环

subClick(){
  ['images','content'].map(item=>{
					this.getImg(item)
	})
}

处理数据

getImg(refText) {
                 //refText为自己 定义的ref
				let files = [];
				// 通过filter,筛选出上传进度为100的文件(因为某些上传失败的文件,进度值不为100,这个是可选的操作)
				files = this.$refs[refText].lists.filter(val => {
					return val.progress == 100;
				})
				if(refText=='images' && files.length==0){
					this.$refs.uToast.show({
						title: '请上传商品图片',
						type: 'error'
					})
					return
				}
				
				if(refText=='content' && files.length==0){
					this.$refs.uToast.show({
						title: '请上传商品详情图片',
						type: 'error'
					})
					return
				}
				let ids=[]
				files.map(item=>{
                  //在这里判断出是否为回显上去的图片,我拿出来的是图片id
					if(item.file_id){
						ids.push(item.file_id)
					}else{
						ids.push(item.response.data.file_id)
					}
				})
              //赋值给自己的数据
				this.skuQuery[refText]=ids.join(',')
			},

关于另外一个upload循环问题在这​​​​​​​

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

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

相关文章

Modbus-ASCII数据帧

Modbus-ASCIl传输模式中&#xff0c;每个字节均以ASCI编码&#xff0c;实际报文中1个字节会以两ASCIl字符发送&#xff0c;因此这种模式比Modbus-RTU模式效率要低。 例如报文数据 x5B "5""B" X35 X42 . 数据帧格式如下: 从ASCI报文帧可以看出&#xff0…

混凝土强度达到多少才可以拆模板

混凝土拆模的时间取决于多种因素&#xff0c;包括混凝土的强度、环境条件、水泥类型、混凝土配方、模板类型及结构特点等。一般来说&#xff0c;混凝土拆模的基本准则是在混凝土达到足够的强度以承受自重和施工荷载时进行。这个强度通常是指混凝土达到其设计强度的一定比例。在…

0x43 线段树

0x43 线段树 线段树&#xff08;Segment Tree&#xff09;是一种基于分治思想的二叉树结构&#xff0c;用于在区间进行信息统计。与按照二进制位&#xff08;2的次幂&#xff09;进行区间划分的树状数组相比&#xff0c;线段树是一种更加通用的结构&#xff1a; 1.线段树的每…

探讨小鹏汽车CAN通讯协议分析破解过程数据研究技术应用

当前新能源电动汽车设计日益复杂&#xff0c;为提高舒适性、功能性、提升性能和确保更高的安全性&#xff0c;很多汽车的设计中融入了更复杂的功能。包括了雷达、激光雷达、自适应巡航、L2以上自动驾驶系统&#xff0c;高级驾驶辅助系统、盲区监测等等。安装在汽车上的传感器和…

在vue中获取文件的Md5值,以上传图片与视频为例

在vue中获取文件的Md5值 1. Md5 是什么&#xff1f;2. 使用插件spark-md5处理3. 获取图片文件的Md5值4. 视频文件的Md5值获取 1. Md5 是什么&#xff1f; MD5信息摘要算法&#xff08;英语&#xff1a;MD5 Message-Digest Algorithm&#xff09;&#xff0c;一种被广泛使用的…

【智慧校园】基于国标GB28181协议EasyCVR视频技术的高校宿舍智能监管方案

现如今&#xff0c;各大学校不乏众多住校生&#xff0c;但由于很多学生年龄较小 &#xff0c;又缺乏独自生活的经历&#xff0c;如何给在校住宿生做到安全与生活双重保障&#xff1f;旭帆科技校园智能视频监控通过人工智能技术对住宿区域进行智能监管&#xff0c;确保学生住宿安…

自定义权限管理系统概述

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 今天我们来聊聊如何自定…

Markdown语法 in Typora

Typora 是个好东西&#xff0c;如果不收费的话就更好了&#xff1b; Typora 破解 其实一直点击15天试用也是可以一直用一直用的&#xff1b; 数学公式 在Markdown扩展语法这里要选一下&#xff0c;才可以使用行内数学公式&#xff1b; 行内公式 $f(x) 2x^25x3$&#xff…

500平左右需要用建筑模板多少张?

为了计算500平方米&#xff08;㎡&#xff09;的建筑面积需要多少张模板&#xff0c;我们首先需要知道每张模板的面积。你提供了两种尺寸的模板&#xff1a;915毫米 x 1830毫米 和 1220毫米 x 2440毫米。我们先将这些尺寸从毫米转换为米&#xff0c;然后计算每张模板的面积&…

springboot整合rabbitmq附源码

前提是对rabbitmq有一定的了解&#xff0c;比如虚拟主机&#xff0c;交换机&#xff0c;队列&#xff0c;信道&#xff0c;绑定&#xff0c;路由键&#xff0c;direct&#xff0c;fanout&#xff0c;topic等 我使用的是docker部署的rabbitmq&#xff0c;看到简书的这个&#x…

如何通过宝塔面板搭建一个MySQL数据库服务并实现无公网ip远程访问?

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

WEB渗透—PHP反序列化(五)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

69 排序高手

数据以字符串形式输入&#xff0c;期间转到数组内 #include <iostream> #include <string> #include <vector>using namespace::std; using std::cout; using std::cin; int pxgs(vector<int>& nums) {int nnums.size();int l0,rn-1;while(l<…

博客3万访问量了……

博客有3万访问量了呢。自从第一次用了赠送的1500的流量券&#xff0c;粉丝了从零突破了&#xff0c;到现在有150个粉丝了。 之前预想的写博客的初衷&#xff0c;也是记录自己的学习过程&#xff0c;毕竟好记忆不如烂笔头&#xff0c;记录下来就是长长久久的&#xff0c;随时可以…

Java-Security-1

JWT详解​​​​​​​ 1、SpringSecurity 1.1 简介 Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架 Shiro &#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比 Shiro 丰富。 一般来说中大型的项目都是使用 SpringSecurity 来做安全框…

金蝶EAS打印凭证,数据量多点的就会出错

金蝶EAS打印凭证&#xff0c;数据量多点的就会出错&#xff0c;约过100页&#xff0c;提示数据源有问题 经咨询工程师需修改java虚拟机内存。 打开eas客户端目录&#xff0c;运行set-url.bat 看到原来java虚拟机只配置了512M内存&#xff0c;把虚拟机内存修改为4096&#xff0…

基于SSM的学生在线考试系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

sql学习笔记(四)

1. 避免字段名与关键字冲突 1️⃣ 2️⃣ as 设置别名 2. 同比与环比 「同比」&#xff1a;与历史「同时期&#xff3d;比较&#xff0c;例如2011年3月份与2010年3月份相比&#xff0c;叫「同比」。 「环比」&#xff1a;与「上一个」统计周期比较&#xff0c;例如2011年4…

Postman测试文件上传接口

文章目录 一、Postman测试文件上传接口1、创建一个请求→选择请求方式→填写请求的URL→填写请求的参数值2、选择 "Body" → "form-data" → "Test" → "File"3、点击 "Select Files"4、选择要上传的文件5、点击 Send 进行测…

10 Vue3中v-html指令的用法

概述 v-html主要是用来渲染富文本内容&#xff0c;比如评论信息&#xff0c;新闻信息&#xff0c;文章信息等。 v-html是一个特别不安全的指令&#xff0c;因为它会将文本以HTML的显示进行渲染&#xff0c;一旦文本里面包含一些恶意的js代码&#xff0c;可能会导致整个网页发…