微信内置浏览器打开h5页面上传图片

2019-11-9    分类: 前端资源

微信 jssdk

用微信打开h5页面,直接使用以下input是不允许上传图片的。直接使用微信提供的jssdk,去调用微信内部的方法才能上传

<input type="file" accept="images/*">  //微信内置浏览器是不允许用这样直接上传图片,坑

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

 

html:

<button @click="selectimg">选择图片</button>
<button @click="upimg">上传</button>
<img id="img11" src=""> <!--预览图片-->

 

 

这里显示上传需要的部分代码:

jsApiList: [
 'chooseImage',
 'uploadImage',
 'getLocalImgData',
 'downloadImage',
]

 

 

selectimg:function(){  //选择要上传图片
  var self=this;
  wx.chooseImage({
    count: 9, // 默认9
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
     // Tools.dialog.alert(res.localIds[0]);
       self.wxid=res.localIds;
       Tools.dialog.alert(self.wxid);

    }
  });
},


upimg:function(){
  var self=this;
  wx.uploadImage({   //上传图片
    localId: self.wxid.toString(),
    isShowProgressTips: 1,
    success: function (res) {


      wx.downloadImage({   //下载图片
        serverId: res.serverId,
        isShowProgressTips: 1,
        success: function (ress) {


            wx.getLocalImgData({  //获取图片
              localId: ress.localId, // 图片的localID
              success: function (res) {
                var localData = 'data:image/jpg;base64,'+res.localData; // localData是图片的base64数据,可以用img标签显示
                //Tools.dialog.alert(localData)
                $('#img11').attr({src:localData});
              }
            });

        }
      });


    }
  });
},

 

相关文章:

微信jssdk授权签名以及config配置

微信公众号授权第三方 OAuth2.0