使用微信SDK上传图片后空白问题

女爷i 2022-03-26 02:35 266阅读 0赞

1.引用js

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.初始化

wx.config(\{  
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
        appId: "<%=appId %>", // 必填，公众号的唯一标识  
        timestamp: "<%=timestamp %>", // 必填，生成签名的时间戳  
        nonceStr: '<%=noncestr %>', // 必填，生成签名的随机串  
        signature: '<%=signature %>',// 必填，签名，见附录1  
        jsApiList: \['chooseImage','previewImage','uploadImage','getLocalImgData','downloadImage'\] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
    \});

3.上传图片设置

wx.chooseImage(\{  
                count: 7-length, // 默认9  
                sizeType: \['compressed'\], // 可以指定是原图还是压缩图，默认二者都有  
                sourceType: \['album', 'camera'\], // 可以指定来源是相册还是相机，默认二者都有  
                success: function (res) \{  
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片  
                    syncUpload(localIds);      
                \}  
            \});

function syncUpload(localIds) \{  
           var localId = localIds.pop();  
            wx.uploadImage(\{  
                localId: localId,  
                isShowProgressTips: 1,  
                success: function (res) \{  
                    var serverId = res.serverId; // 返回图片的服务器端ID  
                    getLocalImgData(localId,serverId);  
                           
                    if(localIds.length > 0)\{  
                        syncUpload(localIds);  
                    \}  
                \}  
            \});  
     \}

//重点（iOS系统和安卓系统分开处理）

function getLocalImgData(localId,serverId)\{  
      /\*判断ios是不是用的 wkwebview 内核\*/  
                    if (window.\_\_wxjs\_is\_wkwebview)\{  
                            wx.getLocalImgData(\{  
                                localId:localId,  
                                success: function (res)\{  
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示  
                                    localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下  
                                    $('<li sid="'+serverId+'"><span class="insertimg"  style="background-image: url('+localData\+')"></span></li>').insertBefore($(".insertimgbtn").parent());  
                                \}  
                            \});  
                    \}else\{   //如果不是用的wkwebview 内核 或者是用的安卓系统 执行下面的xunh  
                        $('<li sid="'+serverId+'"><span class="insertimg"  style="background-image: url('+localId\+')"></span></li>').insertBefore($(".insertimgbtn").parent());  
                    \}  
     \}

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序如何上传图片

微信小程序上传图片的方法很简单，你可以使用微信小程序的API来实现，具体步骤如下：1. 首先，在小程序的页面中，使用![Image 1][]标签来引用图片；2. 然后，在小程序

素颜马尾好姑娘i/ 2024年03月25日 04:21/ 0 赞/ 78 阅读

相关微信小程序上传图片/文件

微信官方文档有提供上传文件方法： wx.chooseMessageFile(Object object) > 基础库 2.5.0 开始支持，低版本需做[兼容处理]

水深无声/ 2022年12月18日 11:53/ 0 赞/ 215 阅读

相关微信小程序图片上传功能（PHP后端）

文章目录效果图前端效果图后端代码 wxml js php 效果图前端效果

港控/mmm°/ 2022年11月13日 00:51/ 0 赞/ 230 阅读

相关微信jssdk上传图片java_微信JSSDK上传图片_javascript技巧

前不久微信公开了一些接口，其中有一个uploadImage接口用于上传图片，一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片

ゞ浴缸里的玫瑰/ 2022年11月09日 06:03/ 0 赞/ 205 阅读

相关微信下程序解决上传图片旋转问题

总体思路调取getImageInfo获取图片orientation参数，通过orientation返回值调用canvas重新生成图片。 getImgInfo(e,s

左手的ㄟ右手/ 2022年09月09日 06:28/ 0 赞/ 228 阅读

相关使用微信SDK上传图片后空白问题

1.引用js <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 2.初始化 wx

女爷i/ 2022年03月26日 02:35/ 0 赞/ 267 阅读

相关微信小程序上传图片后台Java springboot接收

@RequestMapping(value = "/addRegister") public Object register(@RequestParam("f

客官°小女子只卖身不卖艺/ 2021年09月30日 15:16/ 0 赞/ 694 阅读

相关微信小程序上传图片

//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset

痛定思痛。/ 2021年09月17日 03:02/ 0 赞/ 622 阅读

相关调用微信JS-SDK上传图片爬坑之路

最近最用 vue 开发微信服务号，也是第一次调用微信的sdk ，（先吐槽下自己断断续续的整理一个星期才搞出来）日了狗了，坑太多，更多是 ios 不兼容，图片

左手的ㄟ右手/ 2021年09月14日 08:30/ 0 赞/ 270 阅读

相关微信小程序单张本地图片上传，拍摄图片上传

wxml <button bindtap="upimg" class='jia_img' >上传</button> <image src="{

阳光穿透心脏的1/2处/ 2021年07月24日 17:20/ 0 赞/ 610 阅读