使用微信JS-SDK图像接口上传图片简单实例-创新互联
1.完整实现ios和安卓微信环境选择微信相册图片并上传保存在本地
2.注意js版本兼容，使用该版本
官方解释
3.本实例流程将先调用wx.chooseImage接口获取选择的图片localId，返回localId在安卓微信可以作为img标签的src属性显示图片，但在ios下需要再调用wx.getLocalImgData接口来显示图片，然后要保存图片需调用wx.uploadImage接口将图片上传至微信服务器返回serverId，将serverId放至隐藏域提交后端，由后端调用微信多媒体接口下载保存到自己服务器，多媒体获取接口为：
http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="token()"&media_id="serverId"4.前端核心代码如下：
.....
.....
.....
.....
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId:"{$signPackage.appId}",
timestamp:"{$signPackage.timestamp}",
nonceStr:"{$signPackage.nonceStr}",
signature:"{$signPackage.signature}",
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'uploadImage',
'chooseImage',
'getLocalImgData',
]
});
var imgContainer = document.getElementsByClassName("upload-box")[0];
$("#uploaderBox").on("click", function(e) {
wx.chooseImage({
count: 9, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
var i = 0, length = localIds.length;//循环操作9张图片
function upload() {
var serverId = '';
wx.uploadImage({
localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
serverId = res.serverId; // 返回图片的服务器端ID
if(agent_type == 'android')
{
var localData = localIds[i]; // localData是图片的base64数据，可以用img标签显示
//追加html
var img = document.createElement("img");
var input = document.createElement("input");
var ass = document.createElement("a");
img.setAttribute("src", localData);
input.setAttribute("name", "serverId[]");
input.setAttribute("value", serverId);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
ass.setAttribute("class", "shc-btn");
ass.setAttribute("id", "shc-btn"+id);
ass.setAttribute("href", "javascript:;");
imgAdd.appendChild(ass);
imgAdd.appendChild(img);
imgAdd.appendChild(input);
imgContainer.appendChild(imgAdd);
imgRemove(id);//删除按钮
id++;
}
else
{
wx.getLocalImgData({
localId: localIds[i], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
var img = document.createElement("img");
var input = document.createElement("input");
var ass = document.createElement("a");
img.setAttribute("src", localData);
input.setAttribute("name", "serverId[]");
input.setAttribute("value", serverId);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
ass.setAttribute("class", "shc-btn");
ass.setAttribute("id", "shc-btn"+id);
ass.setAttribute("href", "javascript:;");
imgAdd.appendChild(ass);
imgAdd.appendChild(img);
imgAdd.appendChild(input);
imgContainer.appendChild(imgAdd);
imgRemove(id);
id++;
}
});
}
i++;
if (i < length) {
upload();
}
}
});
}
upload();
}
});
});5.后端核心代码如下：
foreach ($data['serverId'] as $key => $value)
{
$str = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".获取token."&media_id=".$value;
$a = file_get_contents($str);
if($a)
{
$resource = fopen(ROOT_PATH."/uploads/".$value.".jpg" , 'w+');
fwrite($resource, $a);
fclose($resource);
$imgs[] = "/uploads/".$value.".jpg";
}
}效果截图
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：使用微信JS-SDK图像接口上传图片简单实例-创新互联
标题路径：http://ybzwz.com/article/ddoshc.html
