在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了async 和 await,将异步变为同步去执行。

 1 // 图片上传
2 handleImage(typeVal) {
3 const uploadObj = this.imgData.uploadType.find(
4 (item) => item.typeVal === typeVal
5 );
6 const count = uploadObj ? 5 - uploadObj.addFiles.length : 5; //图片数量
7 const that = this;
8 wx.chooseImage({
9 count: count,
10 sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
11 sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
12 success: function (res) {
13 that.$toast.loading({
14 message: "加载中...",
15 duration: 0,
16 forbidClick: true,
17 });
18 var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
19 that.localIds = res.localIds;
20 that.readImages(localIds, typeVal);
21 },
22 fail: function () {
23 that.$toast.clear(); //关闭加载
24 },
25 });
26 },
1   async readImages(localIds, typeVal) {
2 this.imgFiles = [];
3 for (var i = 0; i < localIds.length; i++) {
4 await this.doReadImage(localIds[i], typeVal,i);
5 }
6 },
  doReadImage(localId, typeVal,i) {
const that = this;
return new Promise((resolve) => {
wx.getLocalImgData({
//获取图片Base64数据
localId, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
if (localData.indexOf("data:image") < 0) {
//安卓处理
localData = "data:image/jpeg;base64," + localData;
}
//base64转文件流
const fileData = that.dataURLtoFile(localData);
//不压缩图片
//files.push({data:localData,size:fileData.size});
//压缩图片
that.imgFiles.push(fileData);
const files = that.imgFiles;
if (i+1 === that.localIds.length) {
that.uploadIpt({ files }, typeVal);
}
resolve("done!");
},
fail: function () {
that.$toast.clear(); //关闭加载
},
});
});
},
  //base64转文件流
dataURLtoFile(dataurl, filename = "") {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},

在vue中使用微信jssdk的getLocalImgData怎么让多张图片显示的更多相关文章

  1. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  2. 如何正确的在项目中接入微信JS-SDK

    微信JS-SDK的功能 如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...

  3. ASP.NET MVC做的微信WEBAPP中调用微信JSSDK扫一扫

    今天做一个项目,是在微信上用的,微信WEB APP,里面用到了调用手机摄像头扫一扫二维码的功能,记得以前某个项目里写有的,但是找不到之前那个项目源码了,想复制粘贴也复制不了了,只好对着微信的那个开发文 ...

  4. 在vue中获取微信支付code及code被占用问题的解决?

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取 ...

  5. VUE项目引入微信jssdk

    npm i -S weixin-js-sdkimport wx from 'weixin-js-sdk'

  6. 微信jssdk的getLocalImgData拿到的base64不完整

    最近上传图片接口突然出现偶尔报错,错误内容是 图片的base64 在调用 Convert.FromBase64String 报错了. 我从log里面拿到一些 出错的 base64. 发现都有一个特征 ...

  7. vue中v-cloak解决刷新或者加载出现闪烁(显示变量)

    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p> & ...

  8. vue中使用axios post上传头像/图片并实时显示到页面

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码:   <div id="myPhoto ...

  9. 企业微信JS-SDK实现会话聊天功能

    vue引入企业微信JS-SDK实现会话聊天功能 这两天在做一个对接企业微信实现会话聊天的功能, 发现企业微信文档这块儿做的不是特别详细,网上搜索也没找到特别完整的流程. 期间也踩了不少的坑, 在此进行 ...

随机推荐

  1. Java并发编程--基础进阶高级(完结)

    Java并发编程--基础进阶高级完整笔记. 这都不知道是第几次刷狂神的JUC并发编程了,从第一次的迷茫到现在比较清晰,算是个大进步了,之前JUC笔记不见了,重新做一套笔记. 参考链接:https:// ...

  2. 老板防止我上班摸鱼,给我装了个chrome插件

    <铁柱幻想的摸鱼生活> 9:30:到达公司,开开电脑,收拾一下办公桌 9:40:吃个早餐,接杯水(一定要多喝水,一个肾结石同事的出院后的衷心建议) 10:00:打开"技术网站&q ...

  3. 流程自动化RPA,Power Automate Desktop系列 - 创建WPF程序安装包及升级包

    一.背景 之前写过的几个WPF小工具,每次发布都需要给它打安装包和升级包,涉及到一些系列繁琐的手工操作,有了Power Automate Desktop,于是便寻思着能不能做成一个自动化的流来使用. ...

  4. Jenkins自动化CI&CD流水线

    1 环境说明 主机名称 IP cpu核数/内存/硬盘 安装软件 用途 controlnode 172.16.1.120 2/2/60 git 代码仓库 slavenode1 172.16.1.121 ...

  5. Springboot quartz集群(3) — 多节点发送邮件

    本期将提供quartz集群能力 集群案例分析: 上一期的邮件发送功能,若在服务需要部署多节点,但定时任务不支持集群,因此,多节点定时任务势必会同时运行, 若向用户发送邮件通知,这种情况下会向用户发送两 ...

  6. Leetcode No.66 Plus One(c++实现)

    1. 题目 1.1 英文题目 Given a non-empty array of decimal digits representing a non-negative integer, increm ...

  7. 递推算法,AI衍生

    引言 最近在刷leetcode算法题的时候,51题很有意思: 题目是这样的: n 皇后问题 研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击.给你一个整数 n ,返回 ...

  8. HAl库控制L298N直流电机旋转笔记

    主函数开始后的处理流程: 1..所有外设初始化:HAL_Init() 2.系统时钟配置 RCC振荡器初始化:HAL_RCC_OsConfig() RCC时钟初始化:HAL_RCC_ClockConfi ...

  9. 修改gitlab默认的nginx

    目录 1. 修改gitlab的配置文件 2. nginx配置 3. 重载 前言: 本文将介绍,如何禁用gitlab自带的nginx,用已经安装的nginx提供web服务. 1. 修改gitlab的配置 ...

  10. 关于kong | API Gateway

    目录 为什么需要 API 网关(more) kong的概念 为什么使用Kong Kong 的管理方式 高可扩展性的背后-插件机制 [前言]: Kong是一个云原生,高效,可扩展的分布式 API 网关. ...