uniapp 运用Promise实现多图片上传

使用业务场景,循环多个图片上传控件,每一个上传到指定字段;

dom结构如下:

<u-form :model="userForm" :rules="rules" ref="uForm" labelWidth="160">			<u-form-item v-for="(item,index) in userForm.constructProcessList" :key="index" labelWidth="70" borderBottom><block slot="label" v-if="index<=5">{{ item.key }}:</block> <block slot="label" v-else>    <u-input v-model.trim="item.key" :placeholder="`请输入${item.key}`"></u-input></block>  <view style="display: flex; flex-wrap: wrap;"><view class="uni-uploader__input-box"><view class="uni-uploader__input" @tap="chooseImage(index)"></view></view><view class="uni-uploader__files" v-if="item.value!=null"><block v-for="(src,i) in item.value" :key="i"><view class="uni-uploader__file wrapAll"><uni-icons type="close" size="19" color="#b6b6b6" class="imgwrap"@click="deletePic(index,i)"></uni-icons><image class="uni-uploader__img" mode="aspectFill" :src="src" :data-src="src" @tap="previewImage($event,i)"></image></view>						</block></view>	</view><view style="font-size: 12px; color: #666;">仅支持.jpg, .jpeg, .png文件,最多能上传9个,且单个文件不超过20M</view><view style="width: 50px; margin: 0 auto;"><u-button type="error" shape="circle" icon="minus" @click="deleteItem(item, index)" v-if="index>5"></u-button></view>					</u-form-item><u-form-item labelWidth="70"><view style="width: 50px; margin: 0 auto;"><u-button type="primary" shape="circle" icon="plus" @click="addItem"></u-button></view>				</u-form-item>			</u-form>

js部分:

var sourceType = [['camera'],['album'],['camera', 'album']]var sizeType = [['compressed'],['original'],['compressed', 'original']]data() {return {				sourceTypeIndex: 2,sourceType: ['拍照', '相册', '拍照或相册'],sizeTypeIndex: 2,sizeType: ['压缩', '原图', '压缩或原图'],countIndex: 8,count: [1, 2, 3, 4, 5, 6, 7, 8, 9],		userForm: {					wellId: null,	constructProcessList:[{key:'字段1',value:[]},{key:'字段2',value:[]},{key:'字段3',value:[]},{key:'字段4',value:[]},{key:'字段5',value:[]},{key:'字段6',value:[]},],},rules: {wellId: {type: 'string',required: true},},}},methods: {addItem(){this.userForm.constructProcessList.push({key: '',value: []})},deleteItem(item, index){this.userForm.constructProcessList.splice(index, 1)},// 删除图片deletePic(index,i) {uni.showModal({content: "是否删除此图片?",success: (e) => {if (e.confirm) {this.userForm.constructProcessList[index].value.splice(i, 1);}}})},chooseImage: async function(i) {let _self = this;if (_self.userForm.constructProcessList[i].value.length >= 9) {let isContinue = await this.isFullImg(i);if (!isContinue) {return;}}				uni.chooseImage({sourceType: sourceType[this.sourceTypeIndex],sizeType: sizeType[this.sizeTypeIndex],count: 9,success: (res) => {	let tempFiles = res.tempFiles;let paths = tempFiles.map(file => file.path); // 提取路径					_self.userForm.constructProcessList[i].value = _self.userForm.constructProcessList[i].value.concat(paths);					// 发起上传图片的请求,将图片上传到服务器	//多图上传const pList = [];tempFiles.forEach(function(tempFile,item) {const p = new Promise(function (resolve, reject) {uni.uploadFile({url: _self.$api.baseUrl + "/nkdxsjcj/sys/base/uploadFiles",filePath: tempFile.path, name: 'files',header: {'token': uni.getStorageSync('token')},formData: {'files': tempFile.path,folderName: _self.userForm.wellId},success: function (resl) {const data = JSON.parse(resl.data);resolve(data);},fail: function (err) {uni.showToast({title: "上传失败:"+err,icon: 'none',duration: 2000});reject(err);}});});pList.push(p);});Promise.all(pList).then(function (results) {let fileList=[];for(let j=0; j<results.length;j++){fileList.push(results[j].data.toString())}_self.userForm.constructProcessList[i].value.concat(fileList);console.log('上传结束:');}).catch(function (err) {uni.showToast({title: "上传失败:"+err,icon: 'none',duration: 2000});return});				},complete:(resp)=>{let resSize = resp.tempFiles[0].size;if(resSize > 20971520){uni.showToast({title: "上传的图片大小不超过20m",icon: 'none',duration: 2000});return}}})},
isFullImg(i) {let _self = this;return new Promise((res) => {uni.showModal({content: "已经有9张图片了,是否清空现有图片?",success: (e) => {if (e.confirm) {_self.userForm.constructProcessList[i].value=[];res(true);} else {res(false)}},fail: () => {res(false)}})})},previewImage(e,i) {console.log(e)var current = e.target.dataset.src;				uni.previewImage({current: current,urls: this.userForm.constructProcessList[i].value})},
}

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

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

相关文章

【MMU】认识 MMU 及内存映射的流程

MMU&#xff08;Memory Manager Unit&#xff09;&#xff0c;是内存管理单元&#xff0c;负责将虚拟地址转换成物理地址。除此之外&#xff0c;MMU 实现了内存保护&#xff0c;进程无法直接访问物理内存&#xff0c;防止内存数据被随意篡改。 目录 一、内存管理体系结构 1、…

内网穿透:实现公网访问内网群晖NAS的方法

公网远程访问内网群晖NAS 7.X版 【内网穿透】 文章目录 公网远程访问内网群晖NAS 7.X版 【内网穿透】前言1. 在群晖控制面板找到“终端机和SNMP”2. 建立一条连接公网数据隧道3. 获取公网访问内网群晖NAS的数据隧道入口 前言 群晖NAS作为应用较为广泛的小型数据存储中心&#…

SQL92 SQL99 语法 Oracle 、SQL Server 、MySQL 多表连接、Natural 、USING

SQL92 VS SQL 99 语法 92语法 内连接 from table1&#xff0c; table2 where table1.col table2.col 外连接 放在 从表 左连接&#xff1a; from table1&#xff0c; table2 where table1.col table2.col() 右连接&#xff1a; from table1&#xff0c; table2 where table…

自定义注解(Annontation)

目录 1.注解定义 2.元注解定义 3. 自定义注解&#xff08;自定义的注解名称相同的会覆盖原注解&#xff09; 4.Annotation架构&#xff08;元注解参数介绍&#xff09; 1.注解定义 注解是用来将任何的信息或元数据&#xff08;metadata&#xff09;与程序元素&#xff08;类…

苍穹外卖项目解读(四) 微信小程序支付、定时任务、WebSocket

前言 HM新出springboot入门项目《苍穹外卖》&#xff0c;笔者打算写一个系列学习笔记&#xff0c;“苍穹外卖项目解读”&#xff0c;内容主要从HM课程&#xff0c;自己实践&#xff0c;以及踩坑填坑出发&#xff0c;以技术&#xff0c;经验为主&#xff0c;记录学习&#xff0…

深度学习基础知识扫盲

深度学习 监督学习&#xff08;Supervised learning&#xff09;监督学习分类 无监督学习&#xff08;Non-supervised learning&#xff09;无监督学习的算法无监督学习使用场景 术语特征值特征向量特征工程&#xff08;Feature engineering&#xff09;特征缩放Sigmod functio…

大学生创业运营校园跑腿小程序怎么样?

校园跑腿小程序是一种基于移动互联网的服务平台&#xff0c;旨在为大学生提供便捷的跑腿服务。它可以连接大学生用户和需要代办事务的人群&#xff0c;实现多方共赢的局面。接下来&#xff0c;我将从需求背景、市场前景、功能特点等方面进行分析。 首先&#xff0c;校园跑腿小程…

使用mybatis-plus的updateById方法更新一个numeric(1)类型字段,sql成功执行,但是updates为0,更新失败的解决办法

使用mybatis-plus的updateById方法更新一个numeric(1)类型字段&#xff0c;sql成功执行&#xff0c;但是updates为0&#xff0c;更新失败的解决办法&#xff1a; 背景&#xff1a;我有一张表&#xff0c;有个启用禁用功能&#xff0c;没有放在编辑页面一起编辑保存&#xff0c;…

最强自动化测试框架Playwright-操作指南(3)-PO模式

playwright支持PO模式 创建页面对象 class SearchPage:def __init__(self, page):self.page pageself.search_term_input page.get_by_role("searchbox", name"输入搜索词")def navigate(self):self.page.goto("https://bing.com")def searc…

MySQL5.7数据库、Navicat Premium1.6可视化工具安装教程【详细教程】

文章目录 一、MySQL、Navicat、注册机地址二、安装&#xff08;一&#xff09;、MySQL安装&#xff08;二&#xff09;、Navicat Premium安装&#xff08;三&#xff09;、集活Navicat Premium 三、遇到的问题1、Are you sure your navicat has not beenpatched/modified befor…

TCP/UDP常见考点

1. TCP连接过程 1.1 三次握手 #mermaid-svg-MqcHXmAe6NVoJ6ZL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MqcHXmAe6NVoJ6ZL .error-icon{fill:#552222;}#mermaid-svg-MqcHXmAe6NVoJ6ZL .error-text{fill:#5522…

【高频面试题】微服务篇

文章目录 Spring Cloud1.Spring Cloud 5大组件有哪些&#xff1f;2.服务注册和发现是什么意思&#xff1f;Spring Cloud 如何实现服务注册发现&#xff1f;3.负载均衡如何实现的 ?4.什么是服务雪崩&#xff0c;怎么解决这个问题&#xff1f;5.微服务是怎么监控的 业务相关6.项…

python - 爬虫简介

什么是爬虫&#xff1f; 模拟浏览器对网站服务器发送请求解析服务器返回的响应数据&#xff0c;并保存数据 爬虫能获取哪些数据&#xff1f; 原则上所有可以通过浏览器获取的数据都可以爬取爬虫也只能获取爬取浏览器可以正常获取的数据 爬虫的应用场景&#xff1f; 数据分…

SQL - limit

介绍: limit 是限制的意思, 用于限制返回的查询结果的行数(可以通过limit指定查询多少行数据). MySQL支持limit语法, 用来完成分页. 用法: select 字段1, 字段2, ... from table_name limit offset, length;参数说明: offset: 起始行数, 从0开始计数, 如果省略, 则默认为…

Nginx安装以及LVS-DR集群搭建

Nginx安装 1.环境准备 yum insatall -y make gcc gcc-c pcre-devel #pcre-devel -- pcre库 #安装openssl-devel yum install -y openssl-devel 2.tar安装包 3.解压软件包并创建软连接 tar -xf nginx-1.22.0.tar.gz -C /usr/local/ ln -s /usr/local/nginx-1.22.0/ /usr/local…

数组对象去重的几种方法

场景&#xff1a; let arrObj [{ name: "小红", id: 1 },{ name: "小橙", id: 1 },{ name: "小黄", id: 4 },{ name: "小绿", id: 3 },{ name: "小青", id: 1 },{ name: "小蓝", id: 4 } ]; 方法一&#xff1a;…

【PyTorch】nn.Conv2d函数详解

nn.Conv2d 是 PyTorch 中的一个卷积层&#xff0c;用于实现二维卷积操作 torch.nn.Conv2d(in_channels, out_channels, kernel_size, stride1, padding0, dilation1, groups1, biasTrue, padding_modezeros, deviceNone, dtypeNone )参数解释 in_channels&#xff1a;输入的通…

【React学习】—函数式组件(四)

【React学习】—函数式组件&#xff08;四&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><ti…

在Python和C++中使用Bowyer-Watson算法的简单Delaunay三角剖分库

引言 Delaunay三角剖分是一种常用的计算几何算法&#xff0c;它在许多领域都有广泛的应用&#xff0c;包括计算机图形学、地理信息系统&#xff08;GIS&#xff09;、数值模拟等。在这篇文章中&#xff0c;我们将介绍如何在Python和C中使用Bowyer-Watson算法实现一个简单的Del…

HECI-Securtiy 防火墙路由技术

目录 一、防火墙路由基本原理 1.路由分类 2.路由优先级 3.路由查询先后顺序 4.静态路由基本原理 &#xff08;1&#xff09;指定出接口场景 &#xff08;2&#xff09;指定下一跳地址场景 5.静态路由与多出口 &#xff08;1&#xff09;主备备份 &#xff08;2&#…