微信企業號 JS-SDK：上傳圖片

時間 2019-11-09

原文原文鏈接

微信企業號 JS-SDK：上傳圖片

微信的JS-SDK提供了微信客戶端相關的功能，如：拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃等微信特有的能力，爲微信用戶提供更優質的網頁體驗。這裏將會介紹如何經過調用JS-SDK接口從手機攝像頭或相冊內上傳圖片。javascript

1. 介紹

1.1 流程說明

首先看下整個Demo的流程：前端

①微信客戶端訪問頁面

說明：想使用具體的操做都要在操做以前申請相關JS-SDK權限，這裏將要申請圖像接口。web

③微信客戶端選擇圖片

API：JS-SDK 圖像接口：從手機選擇圖片服務器

說明：在這一步中微信客戶端只是選中了手機中的圖片而且沒有上傳到微信服務器，每個選中的圖片都會生成個localId。微信

④上傳圖片到微信服務器獲取serverId

API：JS-SDK 圖像接口：上傳圖片到微信服務器微信開發

說明：上傳localId到微信服務器，成功後返回每一個圖片的serverId。框架

⑤頁面存儲此serverId並提交到業務服務器

說明：頁面存儲上一步圖片serverId並提交到業務服務器。

⑥業務服務器根據serverId獲取從微信服務器獲取指定圖片

API：http://qydev.weixin.qq.com/wiki/index.php?title=獲取臨時素材文件

說明：業務服務器根據獲得的serverId(media_id)請求微信服務器獲取圖片並存儲到本地。

1.2 流程圖

2.代碼示例

2.1 前端HTML頁面

在頁面加載完畢後會請求獲取JS-SDK的圖像接口：

 
          window.addEventListener( 
          'load' 
          ,  
          function 
          () { 
         
          // reg wxconfig 
         
          Ak.Http.get({ 
         
          url:  
          '/WeChat/ImageTest/GetImageJsSdk' 
          , 
         
          params: { 
         
          url: location.href.split( 
          '#' 
          )[0]  
          // 要包含 code=XXXX&state 等信息 
         
          }, 
         
          isHideLoading:  
          true 
          , 
         
          successCallback:  
          function 
          (res) { 
         
          wx.config(res.data); 
         
          } 
         
          }); 
         
          });