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

左手的ㄟ右手 2021-09-14 08:30 267阅读 0赞

最近最用 vue 开发微信服务号 ，也是第一次调用微信的sdk ， （ 先吐槽下自己 断断续续的整理一个星期才搞出来 ） 日了狗了 ，坑太多 ， 更多是 ios 不兼容 ，图片不显示呀 ， 不能上传多张啦 这里就可以帮你解决 ！ 废话不多说 直接上代码 ：  
第一步 ：首先你得引人 文件：  
[http://res.wx.qq.com/open/js/jweixin-1.2.0.js][http_res.wx.qq.com_open_js_jweixin-1.2.0.js] （目前最新版本）  
支持使用 AMD/CMD 标准模块加载方法加载 同时也支持 npm 安装  
第二步：通过config接口注入权限验证配置 （获取签名）

getUrlConfig(){
            let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath)
            this.$http.get(wiexin).then(response => {
              let data = response.body
              wx.config({
               // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
               jsApiList: ["chooseImage", "uploadImage", "downloadImage",] 
       // 必填，需要使用的JS接口列表
              });
              wx.error(function (res) { 
                alert(res)
              });
    
            }, response => {
              // console.log("请求失败了!!!!")
            });
          },

getUrlConfig 方法里面得  
let wiexin = apiRouter.GET\_CONFIG + encodeURIComponent(this.urlPath)  
apiRouter.GET\_CONFIG ：这个是我 url 定义得常量  
encodeURIComponent ：可把字符串作为URI 组件进行编码  
this.urlPath ： 当前得url  
这个时候就可以看到成功与否了！

第三步 ： 选择图片

onClickUp(){
            let _this = this;
            wx.chooseImage({
              count: _this.imgaesMaxLenght -  _this.localIdImgs.length, // 默认9
              sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
              success: function (res) {
                let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                // 判断 ios 
                if (window.__wxjs_is_wkwebview) {  
                  _this.wxgetLocalImgData(localIds);
                }else{
                  localIds.forEach((item, index) => { _this.localIdImgs.push(item); if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){ _this.imgLenght = false } }); } _this.wxuploadImage(localIds); }, fail: function (res) { console.log("失败") } }); }

然后你们自己看吧

wxuploadImage(localIds) {
           let _this = this;
           var i = 0; var length = localIds.length;
           var upload = function() { 
             let loacId = localIds[i];
             if (window.__wxjs_is_wkwebview) {
               if (loacId.indexOf("wxlocalresource") != -1) {
                 loacId = loacId.replace("wxlocalresource", "wxLocalResource");
               }
             }
             wx.uploadImage({
               localId: loacId, // 需要上传的图片的本地ID，由chooseImage接口获得
               isShowProgressTips: 1, // 默认为1，显示进度提示
               success: function (res) { 
             // alert(res.serverId);
                 var serverId = {
                   id:'',
                   serverid:res.serverId
                 }
                 _this.serverId.push(serverId);
                 i++;
                 i < length && upload();
               },
               fail: function (error) { 
                 alert("失败11")
               }
             });
           }
           upload();
          },
          wxgetLocalImgData(localIds){
            let _this = this;
            var i = 0; var length = localIds.length;
            var upload = function() { 
              wx.getLocalImgData({
                localId: localIds[i], // 图片的localID
                success: function (res) { 
                  let localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                  localData = localData.replace('jgp', 'jpeg');
                  _this.localIdImgs.push(localData);
                  if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){
                    _this.imgLenght = false
                  }
                  i++;
                  i < length && upload();
                }
              });
            }
            upload();
          },

到这里程序就以及完成了 ， 代码可以直接 复制用 ！

经测试 android ios 都兼容

![这里写图片描述][SouthEast]

[http_res.wx.qq.com_open_js_jweixin-1.2.0.js]: http://res.wx.qq.com/open/js/jweixin-1.2.0.js
[SouthEast]: /images/20210813/2fc03971cb5940d8a3b5e952a696a134.png