码迷,mamicode.com
首页 > 微信 > 详细

微信JS-SDK上传多张照片

时间:2018-09-26 21:36:25      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:conf   nat   img   公众   ret   view   cal   blank   uip   

通过JS-SDK进行操作的基本步骤包括:引用微信的JS、配置权限验证参数及使用的接口、通过ready及error验证配置及功能接口的使用等。如下以上传图片Demo为例进行说
(1)引入JS及配置调用参数
<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

微信JS-SDK上传多张照片

标签:conf   nat   img   公众   ret   view   cal   blank   uip   

原文地址:https://www.cnblogs.com/hepc/p/9709482.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!