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

news2024/11/25 1:06:09

<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循环问题在这​​​​​​​

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

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

相关文章

【K8s】2# 使用kuboard管理K8s集群(kuboard安装)

文章目录 安装 Kuboard v3部署计划 安装登录测试 安装 Kuboard v3 部署计划 在正式安装 kuboard v3 之前&#xff0c;需做好一个简单的部署计划的设计&#xff0c;在本例中&#xff0c;各组件之间的连接方式&#xff0c;如下图所示&#xff1a; 假设用户通过 http://外网IP:80…

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析&#xff1a;出现这种情况在Windows中很常见&#xff0c;就是端口被占用 解决措施&#xff1a;这时我们只需改一下端口便可以了 登录前端页面(HTML…

windows netstat命令

文章目录 前言各选项的含义如下&#xff1a; 前言 Netstat是控制台命令,是一个监控TCP/IP网络的非常有用的工具&#xff0c;它可以显示路由表、实际的网络连接以及每一个网络接口设备的状态信息。Netstat用于显示与IP、TCP、UDP和ICMP协议相关的统计数据&#xff0c;一般用于检…

SQL基础:查询的基本使用

上一节我们讲述了记录的基本操作&#xff0c;这一节我们来单独讲一下查询。 查询基本结构 首先我们来看下查询的基本结构 SELECTcolumn1,column2,... FROMtable_name [WHEREcondition] [GROUP BYcolumn1, column2, ...] [HAVINGaggregate_function(column) condition] [ORDE…

使用docker-compose搭建docker私服与配置WebUI

简介 本文介绍了使用docker compose 搭建 docker私服 环境 Docker version 24.0.6, build ed223bc Docker Compose version v2.21.0 正文 一、创建registry文件夹 我的路径是/usr/loca/docker/registry 二、创建并编写docker-compose.yml version: "3.9" services…

MyBatis Plus使用遇到的问题

如果想使用Mapper的xxxById()方法&#xff0c;实体类的主键上面必须加上TableId注解&#xff0c;如果不加&#xff0c;会报错 2023-12-21 22:48:33.526 WARN 11212 --- [ main] c.b.m.core.injector.DefaultSqlInjector : class com.example.mybatisplusdemo.dom…

CEC2013(python):五种算法(GA、WOA、GWO、DBO、HHO)求解CEC2013(python代码)

一、五种算法简介 1、遗传算法算法GA 2、鲸鱼优化算法WOA 3、灰狼优化算法GWO 4、蜣螂优化算法DBO 5、哈里斯鹰优化算法HHO 二、5种算法求解CEC2013 &#xff08;1&#xff09;CEC2013简介 参考文献&#xff1a; [1] Liang J J , Qu B Y , Suganthan P N , et al. Prob…

C语言---井字棋(三子棋)

Tic-Tac-Toe 1 游戏介绍和随机数1.1 游戏介绍1.2 随机数的生成1.3 棋盘大小和符号 2 设计游戏2.1 初始化棋盘2.2 打印棋盘2.3 玩家下棋2.4 电脑下棋2.5 判断输赢2.6 game()函数2.7 main()函数 3 完整三子棋代码3.1 Tic_Tac_Toe.h3.2 Tic_Tac_Toe.c3.3 Test.c 4 游戏代码的缺陷 …

3-高可用-隔离术

隔离是指将系统或资源分割开&#xff0c;系统隔离是为了在系统发生故障时&#xff0c;能限定传播范围和影响范围&#xff0c;即发生故障后不会出现滚雪球效应&#xff0c;从而保证只有出问题的服务不可用&#xff0c;其他服务还是可用的。 比较多的隔离手段有线程隔离、进程隔…

开源堡垒机JumpServer结合内网穿透实现远程访问

开源堡垒机JumpServer结合内网穿透实现远程访问 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 …

57 优化二进制序列

动态规划 #include <iostream> using namespace::std; using std::cout; using std::cin; int yhejz(int n, int nums[]) {int dp0 0;int dp1 0;int result -1;for(int i0; i<n; i){if(nums[i] 1){dp1;dp0;}else {dp1 dp01;dp0 0;}result max(dp1,max(dp0,re…

计算机毕业设计 基于SpringBoot的大学生平时成绩量化管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

在线培训考试系统的优势及应用场景介绍

在线培训考试系统是一种基于互联网的教育工具&#xff0c;它结合了在线培训和考试的功能&#xff0c;具有许多优势和广泛的应用场景。 提高学习效果 在线培训考试系统首先可以提高学习效果。系统提供了多媒体学习资源&#xff0c;例如文字、图片、音频和视频等&#xff0c;以…

Visual Studio 输入英文会在字母之间自动增加空格

问题如图&#xff1a; 原因&#xff1a;我们在输入中文的时候&#xff0c;不小心按下了shift空格键&#xff0c;比如&#xff1a; 此时&#xff0c;我们在输入中文的时候&#xff0c;再次按下shift空格键就可以恢复正常了。

docker部署个人网站项目记录(前后端分离)

背景 项目是前后端分离&#xff0c;前端有三部分&#xff0c;分别是 个人网站&#xff08;blog&#xff09;网站后台管理系统&#xff08;admin&#xff09;数据大屏&#xff08;datascreen&#xff09; 后端是基于nodejs写的后台服务 后台接口服务&#xff08;todo-nodejs…

uniapp图片上传说明

目录 1.文件上传组件 2.单文件上传 3.多文件上传 4.图片的回显 5.注意点 1.文件上传组件 前端上传组件使用uni-file-picker&#xff0c;可以自行进行下载使用。默认上传到绑定的服务空间&#xff0c;配置属性auto-upload为false关闭自动上传&#xff0c;可以限定上传的是…

【JAVA基础】DeferredResult使用详解

简介 Servlet3.0提供了基于servlet的异步处理api&#xff0c;Spring MVC只是将这些api进行了一系列的封装&#xff0c;从而实现了DeferredResult。 DeferredResult字面意思是"延迟结果"&#xff0c;它允许Spring MVC收到请求后&#xff0c;立即释放(归还)容器线程&…

OpenCV4工业缺陷检测的六种方法

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

【递归 回溯】LeetCode-17. 电话号码的字母组合

17. 电话号码的字母组合。 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digit…

轻量级web开发框架Flask本地部署及无公网ip远程访问界面

文章目录 前言1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 前言 本篇文章讲解如何在本地安装Flask&#xff0c;以及如何将其web界面发布到公网上并进行远程访问。 Flask是目前十分流行的web框架&#xff0c;采用P…