在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了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. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

  2. Spring事件发布与监听机制

    我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章,回复[资料],即可获得我精心整理的技术资料,电子书籍,一线大厂面试资料和优秀简历模板. 目录 ...

  3. js jq计算器

    <html><head><meta http-equiv="Content-type" content="text/html; charse ...

  4. 49、django工程(cookie+session)

    49.1.介绍: 1.cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要"保持状态",因此cookie就是在这样一个场景下诞生. cooki ...

  5. 使用Dice loss实现清晰的边界检测

    ​ 前言: 在深度学习和计算机视觉中,人们正在努力提取特征,为各种视觉任务输出有意义的表示.在一些任务中,我们只关注对象的几何形状,而不管颜色.纹理和照明等.这就是边界检测的作用所在. 关注公众号CV ...

  6. 查看JVM中的线程名

    实例说明 在Java虚拟机中(JVM):除了用户创建的线程,还有服务于用户线程的其他线程.它们根据不同的用途被分到不同的组中进行管理.本实例将演示JVM中线程的名字及其所在组的名称. 关键技术 线程组 ...

  7. Maven:Maven的project标签报错红线

    作者在外网完成demo项目,把Maven的本地库打成压缩包放进内网时,Maven的project标签报错红线,且别的依赖不报错,同时Maven不引入本地仓库的依赖包. 解决方法: 进入自己的Maven ...

  8. rosbag 初尝试

    overview ROS (Robot Operating System, 机器人操作系统) 提供一系列程序库和工具以帮助软件开发者创建机器人应用软件.它提供了硬件抽象.设备驱动.函数库.可视化工具. ...

  9. luogu P2710 数列

    (这是个双倍经验呀! 题目描述 维护一个可以支持插入.删除.翻转.区间赋值.求和.求值和求最大子段和操作的序列.(真·简洁) solution 基本不用什么神奇操作,平衡树硬上就行.(我用的 Spla ...

  10. C语言:猴子吃桃问题

    //猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个. //第二天早上又将第一天剩下的桃子吃掉一半,有多吃了一个.以后每天早上都吃了前一天剩下的一半零一个. //到第 10 ...