微信JS-SDK上傳多張照片
阿新 • • 發佈:2018-09-26
nonce 驗證配置 客戶 http common .get 步驟 pil 16px 通過JS-SDK進行操作的基本步驟包括:引用微信的JS、配置權限驗證參數及使用的接口、通過ready及error驗證配置及功能接口的使用等。如下以上傳圖片Demo為例進行說
(1)引入JS及配置調用參數
(3)點擊上傳時遍歷“res.localIds”分別調用uploadImage
可獲取“var serverId = res.serverId; ”,此serverId對應存儲在微信平臺裏的唯一資源mediaId,將mediaId POST到後端可通過微信的接口獲取photo stream再保存到本地或上傳到cloud 註意:如下需將流的當前位置設置為0 stream.Position = 0;(否則會導致上傳到Azure等時會出現打不開的情況)
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。 appId: ‘@CommonOperate.GetJsSdkUiPackage().AppId‘, // 必填,公眾號的唯一標識 timestamp: @CommonOperate.GetJsSdkUiPackage().Timestamp, // 必填,生成簽名的時間戳 nonceStr: ‘@CommonOperate.GetJsSdkUiPackage().NonceStr‘, // 必填,生成簽名的隨機串 signature: ‘@CommonOperate.GetJsSdkUiPackage().Signature‘, // 必填,簽名 jsApiList: [ //必填,需要使用的JS接口列表,所有JS接口列表見附錄2 ‘checkJsApi‘, ‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘, ‘downloadImage‘, ‘getLocation‘, ‘openLocation‘ ] });
(2)通過chooseImage選取多張照片,選取成功後可獲得本地照片的ID集“res.localIds”
(3)點擊上傳時遍歷“res.localIds”分別調用uploadImage
可獲取“var serverId = res.serverId; ”,此serverId對應存儲在微信平臺裏的唯一資源mediaId,將mediaId POST到後端可通過微信的接口獲取photo stream再保存到本地或上傳到cloud 註意:如下需將流的當前位置設置為0 stream.Position = 0;(否則會導致上傳到Azure等時會出現打不開的情況)
/// <summary> /// 上傳微信照片 /// </summary> /// <param name="repairId"></param> /// <param name="mediaId"></param> /// <returns></returns> [HttpPost] public JsonResult UploadWxImage(int repairId, string mediaId) { using (MemoryStream stream = new MemoryStream()) { CommonOperate.GetMedia(mediaId, stream); stream.Position = 0; string localPath = Server.MapPath($"~/Content/{Guid.NewGuid()}.jpg"); try { System.Drawing.Image imgLocal = System.Drawing.Image.FromStream(stream); imgLocal.Save(localPath); }
參考: JS-SDK https://work.weixin.qq.com/api/doc#10029/%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%E6%8E%A5%E5%8F%A3
微信JS-SDK上傳多張照片