最近要在微信上做個問卷調查，有個上傳圖片功能，折騰找了半天資料，都不好弄，最終打算調用微信提供的上傳圖片接口，實現上傳圖片功能！此功能最大的好處是可以在微信服務器上暫存圖片，減少本地服務器圖片的緩存，等到最后的提交，在從微信提供的接口中下載圖片到本地服務器中保存！
概述
微信JS-SDK是微信公眾平台面向網頁開發者提供的基於微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。
此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。
先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發者中心”查看對應的接口權限。
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備注：支持使用 AMD/CMD 標准模塊加載方法加載
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.ready(function(){
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});
所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：
1.success：接口調用成功時執行的回調函數。
2.fail：接口調用失敗時執行的回調函數。
3.complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。
4.cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
5.trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。
備注：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。
以上幾個函數都帶有一個參數，類型為對象，其中除了每個接口本身返回的數據之外，還有一個通用屬性errMsg，其值格式如下：
調用成功時："xxx:ok" ，其中xxx為調用的接口名
用戶取消時："xxx:cancel"，其中xxx為調用的接口名
調用失敗時：其值為具體錯誤信息
圖像接口
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
}
});
wx.previewImage({
current: '', // 當前顯示圖片的http鏈接
urls: [] // 需要預覽的圖片http鏈接列表
});
wx.uploadImage({
localId: '', // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function (res) {
var serverId = res.serverId; // 返回圖片的服務器端ID
}
});
備注：上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務器，此處獲得的 serverId 即 media_id。
wx.downloadImage({
serverId: '', // 需要下載的圖片的服務器端ID，由uploadImage接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function (res) {
var localId = res.localId; // 返回圖片下載后的本地ID
}
});
引入JS后，進行權限驗證配置，相關的參數值通過Ajax后台請求獲取到：
- $.ajax({
- url: "test.ashx",
- data: {
- name: "GetWxJsApi",
- curUrl: url
- },
- type: 'post',
- dataType: "json",
- success: function (data) {
- if (data.success == "1") {
- var timestamp = data.timestamp;
- var noncestr = data.noncestr;
- var signature = data.signature;
- //通過config接口注入權限驗證配置
- wx.config({
- debug: false,
- appId: data.appId,
- timestamp: timestamp.toString(),
- nonceStr: noncestr, //生成簽名的隨機串
- signature: signature, //簽名
- jsApiList: ['chooseImage', 'uploadImage', 'downloadImage']
- });
- } else {
- alert(data.error);
- }
- }
- });
- //拍照或從手機相冊中選圖接口
- function wxChooseImage() {
- wx.chooseImage({
- count: 1,
- needResult: 1,
- sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
- sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
- success: function (data) {
- localIds = data.localIds[0].toString(); // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
- if (rh.tostr(localIds)) {
- wxuploadImage(localIds);
- }
- },
- fail: function (res) {
- alterShowMessage("操作提示", JSON.stringify(res), "1", "確定", "", "", "");
- }
- });
- }
備注：上傳圖片有效期3天，可用微信多媒體接口下載圖片到自己的服務器！
- //上傳圖片接口
- function wxuploadImage(e) {
- wx.uploadImage({
- localId: e, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
- isShowProgressTips: 1, // 默認為1，顯示進度提示
- success: function (res) {
- mediaId = res.serverId; // 返回圖片的服務器端ID
- if (rh.tostr(mediaId)) {
- $(".myimg").attr("src", localIds);
- }
- },
- fail: function (error) {
- picPath = '';
- localIds = '';
- alert(Json.stringify(error));
- }
- });
- }
- $.ajax({
- url: "test.ashx",
- data: {
- name: "getPicInfo",
- media: $.trim(mediaId)
- },
- type: "Get",
- dataType: "text",
- success: function (data) {
- picPath = data; //picPath 取得圖片的路徑
- },
- error: function (XMLHttpRequest, textStatus, errorThrown) {
- alert("提交失敗" + textStatus);
- }
- });
- var url = string.Format("https://api.weixin.qq.com/cgi-bin/media/get?access_token={0}&media_id={1}", token, media);
- var PicPath = Common.GetWxPic(url, "").ToString();
- <pre name="code" class="csharp"> public static string GetWxPic(string url,string data)
- {
- string path = "";
- try
- {
- ServicePointManager.Expect100Continue = false;
- ServicePointManager.ServerCertificateValidationCallback = new RemoteCertificateValidationCallback(CheckValidationResult);
- HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url + (data == "" ? "" : "?" + data));
- request.Method = "GET";
- using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
- {
- if(response.StatusCode == HttpStatusCode.OK)
- {
- string fileName = Common.RightStr(response.Headers["Content-disposition"],"filename=",false).Replace("\"","");
- path = "/uploadfile/" + fileName;
- Stream responseStream = response.GetResponseStream();
- BinaryReader br = new BinaryReader(responseStream);
- FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(path), FileMode.Create, FileAccess.Write);
- const int buffsize = 1024;
- byte[] bytes = new byte[buffsize];
- int totalread = 0;
- int numread = buffsize;
- while (numread != 0)
- {
- // read from source
- numread = br.Read(bytes, 0, buffsize);
- totalread += numread;
- // write to disk
- fs.Write(bytes, 0, numread);
- }
- br.Close();
- fs.Close();
- response.Close();
- }
- else
- {
- response.Close();
- path = "";
- }
- }
- }
- catch (Exception)
- {
- path = "";
- }
- return path;
- }
保存圖片到本地服務器上，即可：
