做微信公众号开发有一段时间了,一开始拿到公众号上的上传图片这个需求的时候,心里想了想,那不是很简单吗和普通的文件上传不是一样吗,还被同事笑话了下,后来自己去看了下微信官方提供的文档才发现其实是不太一样的。
简单来说公众号上的图片上传其实分为两个步骤,一是用户从自己相册选出的照片首先会被上传到了微信自己的服务器,然后就有了一个会返回给我们一个mediaId,二来呢我们用这个Id可以从我们的服务端下载这张照片然后进去我们自己的相关处理,最后呢把结果展示给用户。
前端配置
首先进去第一步的操作,用户选择本机的照片然后上传到微信。页面的js配置。
$(document).ready(function () {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
jsApiList: ["getLocation", "uploadImage", "chooseImage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
upImg(localIds.toString(), type);
}
});
});
选择完图片后的上传操作:
function upImg(localIds, type) {
wx.uploadImage({
localId: localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1,// 默认为1,显示进度提示
success: function (res) {
var mediaId = res.serverId; // 返回图片的服务器端ID
uploadImg(mediaId, type); //自己的上传处理
}
});
}
微信部分的上传就搞定了,然后还要在我们自己的平台下载下来这张图片。
后端处理
根据微信提供给我们的mediaId多媒体编号我们可以通过微信提供的接口将这张图片下载下来,参考代码如下:
public static string DownLoad(string accessToken,string mediaId,string serverPath,string fileName)
{
string file = string.Empty;
string strpath = string.Empty;
string savepath = string.Empty;
string stUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + accessToken + "&media_id=" + mediaId;
HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create(stUrl);
req.Method = "GET";
using (WebResponse wr = req.GetResponse())
{
HttpWebResponse myResponse = (HttpWebResponse)req.GetResponse();
strpath = myResponse.ResponseUri.ToString();
WebClient mywebclient = new WebClient();
savepath = System.Web.HttpContext.Current.Server.MapPath(serverPath) + "\\" + fileName;
try
{
mywebclient.DownloadFile(strpath, savepath);
file = savepath;
}
catch (Exception ex)
{
savepath = ex.ToString();
}
}
return file;
}
好了这边的file就是文件的路径了。
总结
上面所讲述的是微信公众号页面上对于图片上传的处理,还有想视频、音频的处理都是和这个一样,这里就不多做介绍了。以上是我对于微信公众号开发的一点点小小的理解,大家也可以私聊我和我谈谈自己的看法或是其他意见!
谢谢大家的支持,转载请注明出处!