在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了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. grep过滤空行和注释行

    1)grep的排除选项为 -v排除空行的命令是:grep -v '^$' filename 2)排除以#注释的命令是:grep -v '^#' filename 3)结合起来就是,既排除空行又排除注释 ...

  2. FTP下载文件时拒绝登陆申请怎么办?

    1.有时候用网页登陆FTP无法下载文件,如下图 2.这时候就需要用文件夹登陆FTP,(打开我的电脑,然后输入ftp://10.2.41.31.如下图 然后就可以下载文件了

  3. 2021Qt打包发布教程

    因为最近写了一个程序,然后想着能给室友玩耍,就研究了一下如何打包,写这篇博客记录一下 1. 首先获得程序的Release版本 就是点击这个Release,然后构建一遍 2. 进入构建的release文 ...

  4. 在vue项目中使用scss,以及vscode适配scss语法(解决使用scss语法编辑器报错)

    项目搭建好之后 安装sass 依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-d ...

  5. VsCode中添加tasks.json

    选中项目文件夹,按ctrl+shift+p,输入tasks 选择之后,继续选择 然后选择 选中就可以了

  6. 【Azure 应用服务】Azure Function集成虚拟网络,设置被同在虚拟网络中的Storage Account触发,遇见Function无法触发的问题

    一切为了安全,所有的云上资源如支持内网资源访问,则都可以加入虚拟网络 问题描述 使用Azure Function处理Storage Account中Blob 新增,更新,删除等情况.Storage A ...

  7. InterlliJ Debug启动提示:Method breakpoints may dramatically slow down debugging

  8. elementui——表格的相同内容单元格合并

    在今天工作中遇到了相同单元格需要合并的一个需求,实现记录如下. 实现效果: 任务要求: 对表中体系这一列相同的体系进行合并. 思路:定义一个空数组:[]定义一个变量:0遍历数据如果有相同数据 在空数组 ...

  9. SpringCloud:eureka的'eurekaAutoServiceRegistration'报错解决方法

    报错信息如下: org.springframework.beans.factory.BeanCreationNotAllowedException: Error creating bean with ...

  10. php+redis实现全页缓存系统

    php redis 实现全页缓存系统之前的一个项目说的一个功能,需要在后台预先存入某个页面信息放到数据库,比如app的注册协议,用户协议,这种.然后在写成一个php页面,app在调用接口的时候访问这个 ...