微信公众号H5页面上传图片-jsdk（其他无法上传）-vue

微信内置浏览器无法利用原生或者其他封装好的组件上传图片到服务器，其根本原因就在于无法取得 file 文件.但是可以获得 base64格式上传给后台。但是一旦后台设置的图片大小限制，就会导致 因 base64过大而上传不了的问题出现。所以用微信jsdk也是一种好的解决方案

---

1.引入微信jsdk

2. 注入配置

3.给个按钮发起调用，js如下

		 ul(e){
              let that = this;
                     wx.chooseImage({
                      count: 1,
                      sizeType: ['original', 'compressed'],
                      sourceType: ['album', 'camera'],
                      success (res) {
                      			//res.locallds 可用于图片src预览
                        	that.syncUpload(res.localIds);  //调用上传到服务器的函数
                      }
                    })
                }   		 
            },
          syncUpload(localIds) {
             let that =this;
             var localId = localIds.pop();
             wx.uploadImage({
                 localId: localId,     // 需要上传的图片的本地ID，由chooseImage接口获得  
                 isShowProgressTips: 1,           // 默认为1，显示进度提示  
                 success: function (res) {
                    let serverId = res.serverId; // 返回图片的服务器端serverId  
                         $.ajax({
                            url: "此处接口",
                            type: "GET",
                            data: {
                               media_id:serverId
                            },
                            success: function (res) {           //成功回调
											//res
                            },
                            error:function(e){
                                   //e
                            }
                        })
                     
                }
             });
         	},  

4.后端利用微信的素材库接口获取上传图片，并将图片传到阿里云服务器，返回图片地址

微信素材库获取图片链接	
获取上传图片微信API: "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=token&media_id=serveId
1.token可以通过微信提供的方法获取
2.serveId 是前端传过来的serveId