在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了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 提效神器 Stream 的冷门技巧

    Stream 使用这个方法创建一个 Stream 对象. new ArrayList<>().stream() Filter 过滤器,里面传递一个函数,这个函数的返回结果如果为 true ...

  2. 35、cobbler自动化安装操作系统

    35.1.cobbler介绍: Cobbler是独立的,不需要先安装Kickstart然后再安装Cobbler: Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速 ...

  3. 8、oracle密码过期设置

    8.1.登录到oracle实例: [oracle@slave-node2 ~]$ echo $ORACLE_SID orcl [oracle@slave-node2 ~]$ sqlplus sys/1 ...

  4. 20、oralce中单引号和双引号的区别

    20.oralce中单引号和双引号的区别: 20.1.单引号和双引号oracle都支持,但是两者是有区别的: 20.2.双引号在 Oracle 中的作用: 1.双引号的作用是:假如建立对象的时候,对象 ...

  5. thinkphp5.0 QQ第三方登录详解

    一.前期准备工作 到QQ互联官网进行开发资质认证,并创建网站应用.获取到appid和appkey后,下载demo文件. demo文件下载方式:QQ互联>文档资料>SDK及资源下载>p ...

  6. CentOS7搭建SFTP服务

    CentOS7.5环境下搭建SFTP服务. 创建用户组及用户 创建用户组 # groupadd sftpgroup 创建用户 $ useradd -g sftpgroup -s /sbin/nolog ...

  7. PDO之MySql持久化自动重连导致内存溢出

    前言 最近项目需要一个常驻内存的脚本来执行队列程序,脚本完成后发现Mysql自动重连部分存在内存溢出,导致运行一段时间后,会超出PHP内存限制退出 排查 发现脚本存在内存溢出后排查了一遍代码,基本确认 ...

  8. php mkdir 创建多级目录以及修改权限

    mkdir() 用法:mkdir($path,0777,true); 第一个参数:必须,代表要创建的多级目录的路径:第二个参数:设定目录的权限,默认是 0777,意味着最大可能的访问权:注意:mode ...

  9. 并不是static final 修饰的变量都是编译期常量

    见代码 public class Test { public static void main(String[] args){ // 情况一 基本数据类型 //System.out.println(O ...

  10. Linux环境Nginx安装、调试以及PHP安装(转)

      linux版本:64位CentOS 6.4 Nginx版本:nginx1.8.0 php版本:php5.5 1.编译安装Nginx 官网:http://wiki.nginx.org/Install ...