在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了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. 关于MySql数据库误操作数据找回的办法

    先讲个事,前段时间,系统长时间不用的一个功能被开放出来了,想当然的我没有在测试平台上测试,直接操作了正式系统(的确是我不严谨),导致好多数据异常,页面展示错乱了.于是我想到的第一个就是进行备份还原.项 ...

  2. Linux中的chkconfig

    chkconfig是用来查看开机自启动项目的命令.默认列出linux系统开机自启的项目.平时我们使用时习惯加上--list 从这个图中可以看到当前系统有哪些开机启动项目,就是红色框中的on. 那么怎么 ...

  3. 【译】在运行时编辑代码的 .NET 热重载

    今天,我们很高兴向你介绍 Visual Studio 2019 中 16.11(预览版1)中的 .NET 热重载(通过 .NET 6(预览版4)中的 dotnet watch 命令行工具).在这篇文章 ...

  4. My Idol:Beihai Zhang --<<The Three-body Problem>>

    First 父:"要多想." 子:"想了之后呢?" 父:"北海,我只能告诉你在那以前要多想." 要多想--这场战争敌我力量对比过于悬殊,硬碰 ...

  5. MySql:mysql修改密码及配置远程连接

    通过配置文件修改 mysql5.7  mysql库下面的user表没有password字段无法修改密码,5.7版本已经不再使用password来作为密码的字段了  而改成了authentication ...

  6. centos搭建dns服务器

    前言:搭建dns服务器,dns服务器我就不多说什么了,大家都懂,就是域名解析,就将ip装换为域名,域名就可以理解为类似这样的www.baidu.com网址,接下来我就直接上图了.这里面最重要的是修改u ...

  7. python多线程实现方式,最基础的实现方式模块是什么

    https://blog.csdn.net/daiyu__zz/article/details/81912018 python3.x中通过threading模块创建新的线程有两种方法:一种是通过thr ...

  8. EF Core3.1 CodeFirst动态自动添加表和字段的描述信息

    前言 我又来啦.. 本篇主要记录如何针对CodeFirst做自动添加描述的扩展 为什么要用这个呢.. 因为EF Core3.1 CodeFirst 对于自动添加描述这块 只有少部分的数据库支持.. 然 ...

  9. Adaptive AUTOSAR 学习笔记 5 - 架构 - 物理视图

    本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf 缩写 AP:AUTOSAR Adap ...

  10. Linux系统引导过程及排除启动故障

    一.Linux操作系统引导过程二.系统初始化进程1.init进程2.Systemd3.Systemd单元类型三.排除启动类故障[1].修复MBR扇区故障(含实验过程)[2].修复GRUB引导故障●方法 ...