小程序wx.uploadFile异步问题

问题:小程序上传文件后我需要后端返回的一个值,但这个值总是在最后面导致需要这个值的方法总是报错,打印测试后发现这它是异步的。但直接使用 await来等待也不行。 

uploadImg.wxml

<view class="upload-wrap"><view class="list-wrap"><view class="item" wx:for="{{fileList}}" wx:key="index" wx:for-index="index" wx:for-item="item"><image class="file" src="{{item.url}}" data-url="{{item.url}}" bindtap="viewImage"></image><view wx:if="{{!disabled}}" class="icon-delete" data-index="{{index}}" bindtap="delFile"><image class="icon-delete" src="/images/common/icon-delete.png" mode="widthFix"></image></view></view><view wx:if="{{!disabled && fileList.length<maxCount}}" class="add-wrap" bindtap="chooseFile"><image class="icon-camera" src="/images/common/icon-camera.png" mode="widthFix"></image></view></view>
</view>

uploadImg.js

const app = getApp();
Component({properties: {pageFileList: {optionalTypes: [Array, String],value: () => {return []},observer: function (newValue, oldValue) {let list;if (!newValue) {list = [];} else if (typeof newValue == 'string') {list = JSON.parse(newValue);}this.setData({fileList: list})}},disabled: {type: Boolean,default: false},maxSize: {type: Number,value: 5242880, // 5M},maxCount: {type: Number,value: 9,},category: {type: String,value: 'Personal', // 1:Personal,2:Article,3:Meeting},name: {type: String,value: 'Image'},// 文件类型fileType: {type: Number,value: 1, // 1:Image,2:Video,3:Excel,4:PDF文件},},data: {fileList: [],},methods: {// 选择图片chooseFile() {let choseImgCount;let fileListLen = this.data.fileList.length;let maxCount = this.data.maxCount;// 计算每次可上传的文件数量if (fileListLen == maxCount) {choseImgCount = 0;} else if (maxCount - fileListLen > 9) {choseImgCount = 9;} else {choseImgCount = maxCount - fileListLen;}wx.chooseImage({count: choseImgCount,sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 选择图片的来源success: (res) => {// 限制最大文件体积let overSizeIndex = res.tempFiles.findIndex(v => v.size > this.data.maxSize);if (overSizeIndex > -1) {let msg = "";if (res.tempFiles.length > 1) {msg = "第" + (overSizeIndex + 1) + "个文件已经超过了最大文件限制:"} else {msg = "该文件已经超过了最大文件限制:"}app.alert.show(msg + (this.data.maxSize / 1024 / 1024).toFixed(0) + "M,请重新上传~");return;}this.uploadFile(res.tempFilePaths);}});},// 上传图片async uploadFile(tempFilePaths) {wx.showLoading({title: '上传中...',mask: true})for (let i = 0; i < tempFilePaths.length; i++) {await this.uploadFileHandler(tempFilePaths, i);if (i == tempFilePaths.length - 1) {this.triggerEvent("uploadFiles", { list: this.data.fileList, name: this.data.name });wx.showToast({title: '上传成功',icon: 'none',duration,})}}},uploadFileHandler(tempFilePaths, i) {let self = this;let fileList = self.data.fileList;return new Promise((resolve, reject) => {wx.uploadFile({url: app.siteinfo.apiUrl + '', // 需要用HTTPS,同时在微信公众平台后台添加服务器地址filePath: tempFilePaths[i], // 上传的文件本地地址name: 'file', // 服务器定义的Key值header: {'content-type': 'multipart/form-data','cookie': wx.getStorageSync('cookie')},formData: {uploadDir: self.data.category,fileType: self.data.fileType,},success: function (res) {wx.hideLoading()if (res.statusCode == 200) {let result = JSON.parse(res.data);if (result.status) {let list = [{ name: self.data.name, url: result.data.fileurl }];fileList = fileList.concat(list);self.setData({ fileList });resolve();} else {app.alert.show(result.errmsg, reject(result.errmsg));}} else {app.alert.show('状态:' + res.statusCode + ',提示:' + res.errMsg, reject(res.errMsg));}},fail: function (err) {wx.hideLoading()app.alert.show(err.errMsg, reject(err.errMsg));}});})},// 删除图片delFile(e) {wx.showModal({title: '提示',content: '确定要删除吗?',success: res => {if (res.confirm) {let fileList = this.data.fileList;fileList.splice(parseInt(e.currentTarget.dataset.index), 1);this.setData({ fileList })this.triggerEvent("uploadFiles", {list: fileList,name: this.data.name});wx.showToast({title: '删除成功',icon: 'success',duration: 2000})}}})},// 预览图片viewImage(e) {let urls = this.data.fileList.map(item => { return item.url });wx.previewImage({current: e.currentTarget.dataset.url,urls});},}
})

uploadImg.less

.upload-wrap {.list-wrap {display: flex;flex-wrap: wrap;.item {position: relative;width: 188rpx;height: 188rpx;margin-top: 40rpx;margin-right: calc(~"(100% - 564rpx) / 3");.file {width: 100%;height: 100%;vertical-align: middle;border-radius: 8rpx;}.icon-delete {width: 40rpx;position: absolute;right: -10rpx;top: -10rpx;}}}.add-wrap {display: flex;align-items: center;justify-content: center;flex-direction: column;width: 188rpx;height: 188rpx;margin-top: 40rpx;border: 1px dashed #979797;border-radius: 8rpx;background-color: #f9fafb;text-align: center;.icon-camera {width: 50rpx;height: 46rpx;pointer-events: none;}}
}

 uploadImg.json

{"component": true,"usingComponents": {}
}

应用

<upload-img category="Personal" pageFileList="{{form.image}}" maxCount="3" disabled bind:uploadFiles="uploadFiles">
</upload-img>

 data: {form: {image: '[{"name":"Image","url":"https://wechatmp.uatwechat.com/upload/PersonalCompressed/20230614/20230614114423503.jpeg"}]',video: ''},},uploadFiles(e) {let str = "form." + e.detail.name;let list = e.detail.list;if (list.length > 0) {this.setData({[str]: JSON.stringify(e.detail.list)})} else {this.setData({[str]: '',})}},

app.alert方法封装 alert.js,然后在在app.js引入可使用

const show = (message, showCancel, successCallback = function() {}) => {wx.showModal({title: '提示',content: message,confirmColor: '#DB6276',showCancel: showCancel,success(res) {if (res.confirm) {successCallback();}}})
}module.exports = {show
}

小程序上传多张图片

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

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

相关文章

2024北京智源大会开幕,智源推出大模型全家桶及全栈开源技术基座新版图,大模型先锋集结共探AGI之路

2024年6月14日&#xff0c;第六届“北京智源大会”在中关村展示中心开幕。 北京智源大会是智源研究院主办的“AI内行顶级盛会”&#xff0c;以“全球视野、思想碰撞、前沿引领”为特色&#xff0c;汇聚海内外研究者分享研究成果、探寻前沿知识、交流实践经验。2024北京智源大会…

自定义平台后台登录地址前缀的教程

修改平台后台地址默认的 admin 前缀 修改后端 config/admin.php 配置文件,为自定义的后缀修改 平台后台前端源码中 src/settings.js 文件,修改为和上面一样的配置修改后重新打包前端代码,并且覆盖到后端的 public 目录下重启 swoole 服务即可

Charles配置与API数据抓取

2024软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;-CSDN博客跳槽涨薪的朋友们有福了&#xff0c;今天给大家推荐一个软件测试面试的刷题小程序。https://blog.c…

Crypto++ 入门

一、简介 Crypto&#xff08;也称为CryptoPP、libcrypto或cryptlib&#xff09;是一个免费的开源C库&#xff0c;提供了多种加密方案。它由Wei Dai开发和维护&#xff0c;广泛应用于需要强大加密安全的各种应用程序中。该库提供了广泛的加密算法和协议的实现&#xff0c;包括&…

板凳--------第20章-信号:基本概念1

tlpi_hdr.h头文件使用及设置 liao__ran 于 2020-09-29 15:12:01 发布 阅读量1.6k 收藏 5 点赞数 1 分类专栏&#xff1a; linux系统编程手册 版权 linux系统编程手册 专栏收录该内容 7 篇文章 1 订阅 订阅专栏 使用的头文件&#xff0c;主要如下&#xff1a; ename.c.inc erro…

视频融合共享平台LntonCVS视频监控管理平台技术方案详细介绍

LntonCVS国标视频综合管理平台是一款以视频为核心的智慧物联应用平台。它基于分布式、负载均衡等流媒体技术进行开发&#xff0c;提供广泛兼容、安全可靠、开放共享的视频综合服务。该平台具备多种功能&#xff0c;包括视频直播、录像、回放、检索、云存储、告警上报、语音对讲…

Linux:多线程中的互斥与同步

多线程 线程互斥互斥锁互斥锁实现的原理封装原生线程库封装互斥锁 死锁避免死锁的四种方法 线程同步条件变量 线程互斥 在多线程中&#xff0c;如果存在有一个全局变量&#xff0c;那么这个全局变量会被所有执行流所共享。但是&#xff0c;资源共享就会存在一种问题&#xff1…

基于Pytorch框架构建LeNet-5模型

Pytorch 一、训练模型1.导入必要的库2.设置超参数3.数据预处理4.读取数据 二、定义卷积神经网络1.定义卷积神经网络2.定义学习率3.实例化模型并且移动到GPU4.选择优化器 三、定义调整学习率的函数1.定义调整学习率的函数 四、训练模型1.设置模型为训练模式2.遍历训练数据加载器…

揭秘循环购:消费即收益,如何助力商家月销百万?

大家好&#xff0c;我是吴军&#xff0c;今天要和大家分享一种颠覆性的商业模式——循环购。你是否听说过“消费1000送2000”这样的促销活动&#xff1f;是不是觉得太不可思议&#xff0c;商家岂不是在“送钱”&#xff1f;别急&#xff0c;让我为你揭开这背后的秘密。 循环购&…

RN开发搬砖经验之—“Calculated frame index should never be lower than 0“崩溃问题分析

问题重现 崩溃堆栈&#xff1a; Back traces starts. java.lang.RuntimeException: java.lang.IllegalStateException: Calculated frame index should never be lower than 0at com.facebook.react.animated.NativeAnimatedModule$1.doFrameGuarded(NativeAnimatedModule.ja…

计算机组成原理 | CPU子系统(1)基本概述

基本结构模型 运算与缓存部件 数据寄存部件 PSW不是很清楚 存储器是什么&#xff1f;属于那个结构里&#xff1f; 时序处理部件 cpu是大脑&#xff0c;控制器是神经元 ①通过硬件产生控制信号 ②通过软件产生控制信号 外频&#xff08;系统时钟信号&#xff09;&#xff0c;…

Tesseract-OCR 5.0LSTM训练

准备工作 1.安装tesseract5.0版本 2.配置tesserac环境变量 3.jTessBoxEditor(需要java环境) 很多博客已有详细教程&#xff0c;不再赘述&#xff0c;本文以训练为主 最终文件目录: --tif 需要训练的tif文件 --lstmf 后文会讲到生成的方式 --txt 后文会讲到生成的方式 --box 后文…

【Day02】0基础微信小程序入门-学习笔记

文章目录 模板与配置学习目标WXML 模板语法1.数据绑定&#xff08;类似于 Vue2 &#xff09;2. 事件绑定3. 条件渲染4.列表渲染 WXSS模板样式1. rpx尺寸单位2.样式导入3. 全局样式和局部样式 全局配置1. window2. tabBar 页面配置网络数据请求总结 持续更新~ 模板与配置 学习目…

Databend 开源周报第 149 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持递归公共表…

Nvidia Isaac Sim图编程OmniGraph 入门教程 2024(6)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

创建一个Django项目

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 本小节我们将开始讲解如何使用Django创建一个项目&#xff0c;步骤如下&#xff1a; &#xff08;1&#xff09;首先在D盘&#xff08;读者可以根据…

Java基础:IO流

目录 一、定义 1.引言 2.分类 &#xff08;1&#xff09;按照流的方向分 &#xff08;2&#xff09;按操作文件的类型分 3.体系结构 二、字节流&#xff08;以操作本地文件为例&#xff09; 1. FileOutputStream 类 &#xff08;1&#xff09;定义 &#xff08;2&am…

使用 Iceberg、Tabular 和 MinIO 构建现代数据架构

现代数据环境需要一种新型的基础架构&#xff0c;即无缝集成结构化和非结构化数据、轻松扩展并支持高效的 AI/ML 工作负载的基础架构。这就是现代数据湖的用武之地&#xff0c;它为您的所有数据需求提供了一个中心枢纽。然而&#xff0c;构建和管理有效的数据湖可能很复杂。 这…

PR模板 | RGB特效视频标题模板Titles | MOGRT

RGB特效视频标题模板mogrt免费下载 4K分辨率&#xff08;38402160&#xff09; 支持任何语言 友好的界面 输入和输出动画 快速渲染 视频教程 免费下载&#xff1a;https://prmuban.com/39055.html 更多pr模板视频素材下载地址&#xff1a;https://prmuban.com

不翻墙安装yolov8环境下的RT-DETR并实现PCB表面缺陷检测

目录 一、新建conda环境二、安装yolov8环境1.克隆安装包2.安装依赖包3.测试模型 任务2&#xff1a;基于RT-DETR实现PKU-PCB表面缺陷检测数据准备 数据增强测试 总结 一、新建conda环境 创建并激活conda环境&#xff1a; 在conda创建一个名为yolov8的新环境&#xff0c;并在其中…