当前位置: 首页 > news >正文

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为自己 定义的reflet 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=>{//在这里判断出是否为回显上去的图片,我拿出来的是图片idif(item.file_id){ids.push(item.file_id)}else{ids.push(item.response.data.file_id)}})//赋值给自己的数据this.skuQuery[refText]=ids.join(',')},

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

http://www.lryc.cn/news/264334.html

相关文章:

  • 生活中的物理2——人类迷惑行为(用笔扎手)
  • vue3表格导入导出.xlsx
  • vscode dart语言出现蓝色波浪线
  • 一种磁盘上循环覆盖文件策略
  • elementui消息弹出框MessageBox英文内容不换行问题
  • WPF——样式和控件模板、数据绑定与校验转换
  • 服务器数据恢复-raid5故障导致上层分区无法访问的数据恢复案例
  • 石器时代H5小游戏架设教程
  • 计算机网络-网络协议
  • 多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测
  • 业务出海如何快速将站点搬迁到AWS云中?
  • ansible剧本playbook
  • .NET 中string类型的字符串内部化机制
  • 公共字段自动填充——后端
  • nginx upstream 6种负载均衡策略介绍
  • 基于Antd4 和React-hooks的项目开发
  • Spring中用到的设计模式
  • 常用网络接口自动化测试框架
  • 【重点】【贪心】55.跳跃游戏
  • 灰度化、二值化、边缘检测、轮廓检测
  • 基于JAVA的高校大学生创业管理系统 开源项目
  • 神经网络学习小记录76——Tensorflow2设置随机种子Seed来保证训练结果唯一
  • ai学习笔记-入门
  • workflow系列教程(5-1)HTTP Server
  • php-使用wangeditor实现富文本(完成图片上传)-npm
  • mysql查看数据库中所有的表的建表语句
  • 【Axure RP9】实现登入效验及实现左侧菜单栏跳转各页面
  • 76. 最小覆盖子串。优化官方题解!
  • 在国产GPU寒武纪MLU上快速上手Pytorch使用指南
  • 重生奇迹MU觉醒战士攻略