微信JS-SDK选取手机照片上传并下载保存至自己的服务器

时间：2025-03-09 08:23:25
最近项目中遇到需要用到微信照片上传，用微信的 js-sdk 提供的选取照片功能，然后将照片上传至微信服务器，根据返回图片的服务器端ID将图片下载至自己的服务器，来进行项目开发。

发现里边还是有一些坑，贴出来让遇到坑的小伙伴少走弯路。必要准备:
1. 微信JSSDK开发信息配置,就不多说了,前边也有讲,详见: 微信JSSDK开发信息配置
使用最新的1.2.0版本：/open/js/jweixin-1.2.。

具体实现:
1.拍照或从手机相册中选图
使用微信 js-sdk 的 chooseImage 方法: 
//1.选择图片
({
	count: 1, // 默认9
	sizeType: ['original', 'compressed'], 	// 可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album', 'camera'], 		// 可以指定来源是相册还是相机，默认二者都有
	success: function (res) {
		//var localIds = ; 		// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
		var localId=[0];		// 第一张图片
		alert(localId);
}

2.获取照片数据并显示图片
这里需要注意，微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核，WKWebview 不支持 localId 直接显示图片，所以需要调用一下getLocalImgData接口来实现，在页面中可通过微信注入的window.__wxjs_is_wkwebview变量判断当前使用的webview内核。 
//2.显示图片
if (window.__wxjs_is_wkwebview) {	//判断当前使用的webview内核
	//获取本地图片,此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
	({
		localId: localId, // 图片的localID
		success: function (res) {
			var localData = ; // localData是图片的base64数据，可以用img标签显示
			//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
			localData = ('jgp','jpeg');
			('img_media').src=localData;	//img标签显示图片
		}
	});
}else{
	//安卓使用UIWebview,支持 localId 直接显示图片
	('img_media').src=localId;	//img标签显示图片
}

3.照片上传与下载

这里使用微信 js-sdk 的 uploadImage 方法，这里需要注意的是:要将本地localId使用()将localId强转成String类型，不然上传会报错。

//3.上传图片
({
	//localId : localId, 			// 需要上传的图片的本地ID，由chooseImage接口获得
	localId : (), 	// 需要上传的图片的本地ID，由chooseImage接口获得
	isShowProgressTips: 1, 			// 默认为1，显示进度提示
	success: function (res) {
		var serverId1 = ; // 返回图片的服务器端ID(serverId)
		alert(serverId1);
		//下载图片
		({
			serverId: serverId1, 	// 需要下载的图片的服务器端ID，由uploadImage接口获得
			isShowProgressTips: 1, 	// 默认为1，显示进度提示
			success: function (res) {
				var localId = ; // 返回图片下载后的本地ID
				alert(localId);
			}
		});
	}
});

以上过程合起来就是: 

//1.选择图片
({
	count: 1, // 默认9
	sizeType: ['original', 'compressed'], 	// 可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album', 'camera'], 		// 可以指定来源是相册还是相机，默认二者都有
	success: function (res) {
		//var localIds = ; 		// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
		var localId=[0];		// 第一张图片
		alert(localId);
		//2.显示图片
		if (window.__wxjs_is_wkwebview) {	//判断当前使用的webview内核
			//获取本地图片,此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
			({
				localId: localId, // 图片的localID
				success: function (res) {
					var localData = ; // localData是图片的base64数据，可以用img标签显示
					//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
					localData = ('jgp','jpeg');
					('img_media').src=localData;	//img标签显示图片
				}
			});
		}else{
			//安卓使用UIWebview,支持 localId 直接显示图片
			('img_media').src=localId;	//img标签显示图片
		}
		
		//3.上传图片
		({
			//localId : localId, 			// 需要上传的图片的本地ID，由chooseImage接口获得
			localId : (), 	// 需要上传的图片的本地ID，由chooseImage接口获得
			isShowProgressTips: 1, 			// 默认为1，显示进度提示
			success: function (res) {
				var serverId1 = ; // 返回图片的服务器端ID(serverId)
				alert(serverId1);
				//下载图片
				({
					serverId: serverId1, 	// 需要下载的图片的服务器端ID，由uploadImage接口获得
					isShowProgressTips: 1, 	// 默认为1，显示进度提示
					success: function (res) {
						var localId = ; // 返回图片下载后的本地ID
						alert(localId);
					}
				});
			}
		});
	}
});

上传完毕，根据返回图片的服务器端ID将图片下载至自己的服务器，方法如下: 

/**
 * 下载保存微信图片素材
 * @param  [string] $serverid 微信服务器上的素材ID
 * @return [string] 返回保存本地之后的图片路径
 */
function saveImg($serverid){
	if(empty($serverid)) return false;
	$mediaid = $serverid;
	$token = getToken();
	$curl = '/cgi-bin/media/get?access_token='.$token.'&media_id='.$mediaid;
	$content = request($curl);
	
	if(json_decode($content,true)['errcode']){
		return json_decode($content,true)['errmsg'];
	}
	$filename = $serverid.'.jpg';			//保存的文件名
	$dateStr = date('Ymd');
	$file_dir =  './Upload/image/'.$dateStr.'/'; //保存文件的目录
	if (!is_dir($file_dir)){       			//创建保存文件的目录                            
		mkdir(iconv("GBK","UTF-8", $file_dir),0777,true);       
	}
	
	$path = $file_dir.$filename;			//文件路径
	if(file_exists($path)){    
		unlink($path); 						//如果文件已经存在则删除已有的                                  
	}
	
	$fp = fopen($path, 'w');     
	$state = fwrite($fp,$content);  		//写入数据    
	fclose($fp);
	
	if(!$state) return false;
	
	return $path;
}


相关文章