微信公衆號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