做微信公衆號開發有一段時間了,一開始拿到公衆號上的上傳圖片這個需求的時候,心裏想了想,那不是很簡單嗎和普通的文件上傳不是一樣嗎,還被同事笑話了下,後來自己去看了下微信官方提供的文檔才發現其實是不太一樣的。
簡單來說公衆號上的圖片上傳其實分爲兩個步驟,一是用戶從自己相冊選出的照片首先會被上傳到了微信自己的服務器,然後就有了一個會返回給我們一個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就是文件的路徑了。
總結
上面所講述的是微信公衆號頁面上對於圖片上傳的處理,還有想視頻、音頻的處理都是和這個一樣,這裏就不多做介紹了。以上是我對於微信公衆號開發的一點點小小的理解,大家也可以私聊我和我談談自己的看法或是其他意見!
謝謝大家的支持,轉載請註明出處!