微信JSSDK一次性上传多张图片卡死解决方案

Lemon_95 发布于2019-08-19 18:40 / 1674人阅读

摘要：应用场景描述微信禁止了使用表单上传图片，必须使用微信图片上传，该插件是一张一张的上传的。上传卡死的原因多张连续上传的时候因为还未等一张图片获取完媒体，而下一张图片又开始请求获取媒体，所以会出现卡死问题。

应用场景描述

微信禁止了使用表单INPUT[TYPE="FILE"]上传图片，必须使用微信WEB JSSDK 图片上传，该插件是一张一张的上传的。过程是这样的 上传图片 ——> 返回图片本地ID ——>根据图片本地ID,获取图片媒体ID——>服务端根据图片媒体ID下载图片。

上传卡死的原因

多张连续上传的时候,因为还未等一张图片获取完媒体ID，而下一张图片又开始请求获取媒体ID，所以会出现卡死问题。解决方案如下：

递归处理（推荐）

定时器处理

递归处理逻辑思路

定义两个变量 var idx =0; var localIds; 分别存储上传序号,记录上传到第几张图片，本地图片ID数组，即调用微信 WEB JSSDK 的wx.chooseImage()返回的结果  写递归函数实现获取根据图片本地ID,获取图片媒体ID这个环节。

递归处理逻辑代码

// ID数组
var localIds = null;
// 上传序号
var idx = 0;
var serverIds="";
wx.ready(function(){ //配置web jssdk通过执行
    //调用图片上传接口
    wx.chooseImage({//返回本地图片id 也可做为img 路径显示图片 
           
          success: function (res) {//上传本地图片成功 
           
            localIds = res.localIds;//本地图片id数组，下标从0开始

            //调用上传递归函数
            wxUploadImg(localIds);
            
          }
    });


    /**
     * [wxUploadImg 获取图片媒体ID 递归函数]
     * @author 邱先生 
     * @copyright  
     * @version [V1.0版本] 
     * @date 2016-07-02
     * @param  {[type]} localIds [本地图片ID数组]
     * @return {[type]}          [description]
     */
    function wxUploadImg(localIds){


        wx.uploadImage({//获取图片媒体ID
         
            localId: localIds[idx].toString(),  // 需要上传的图片的本地ID
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {//获取成功
                // 上传序号，上传一张 累计 +1    
                idx++
                //存储图片媒体ID，用，号分割
                serverIds+=res.serverId+",";
                
                if(idx

云服务器 GPU云服务器微信jssdk多图上传 jssdk微信图片 jssdk上传图片微信图片上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79855.html

微信JSSDK 预览图片接口开发

摘要：应用场景在微信公众号开发图片预览功能，例如多张产品图片浏览，微信已经提供了预览图片接口。实现代码加载微信这行代码，引入了第三方微信，也可以具体参考微信手册配置。绑定图片点击事件当前显示图片的链接需要预览的图片链接列表应用场景在微信公众号开发图片预览功能，例如多张产品图片浏览，微信JSSDK 已经提供了预览图片接口。效果图如下： showImg(https://segment...

CarlBenjamin 2019-08-21 10:56 评论0 收藏0
jssdk 在history模式下安卓不能调用图片上传接口和分享接口

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 评论0 收藏0
微信开发之录音上传、下载、转码

摘要：具体请看我在提问里的回答下载七牛云文件间歇性失败总结至此，在微信开发中关于录音这一块儿的功能，就已经介绍完毕。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以点阅读原文进行跳转查看，还有好听的背景音乐噢~ 一年的时间里，前前后后都在搞微信开发...

余学文 2019-06-28 18:30 评论0 收藏0
微信JSSDK 实现打开摄像头拍照再将相片保存到服务器

摘要：在微信端打开手机摄像头拍照，将拍照图片保存到服务器上需要使用到微信的接口，主要使用到了拍照或从手机相册中选图接口上传图片接口参考资料一引入微信二通过接口注入权限验证配置三微信端拍照接口默认可以指定是原图还是压缩图，默认二者都有可以指在微信端打开手机摄像头拍照，将拍照图片保存到服务器上需要使用到微信的JSSDK接口，主要使用到了拍照或从手机相册中选图接口（chooseImage）,上传...

yy13818512006 2019-07-01 13:57 评论0 收藏0