最開始實現圖片上傳用的是<input type=”file”>外掛來實現的。用這種方法在pc以及蘋果的平臺上可以很好的相容，但是在android上各種機型的相容性各有差異，總體上看相容性很差。因為小小創客是屬於移動端微信開發的一部分，如果不能很好的相容蘋果，android，一切都是徒勞的。為了解決這一問題，我們團隊從原來的使用<input type=”file”>上傳轉向呼叫微信現成介面實現上傳。

微信介面上傳的思路為：移動端呼叫微信介面拍照或者從相簿選擇圖片——>呼叫微信上傳介面上傳圖片到微信伺服器（圖片只能在微信伺服器儲存3天）——>利用圖片下載介面將上傳到微信伺服器上的圖片下載到自己伺服器,這樣就完成了圖片的上傳。

微信為開發者提供了一套非常完備的介面：

上圖是微信開發js-sdk文件中的部分介面，其中就有專門的影象介面，而且功能十分完備有拍照、從相簿選擇圖片，預覽圖片，上傳圖片，下載圖片的介面。

實現微信介面上傳的第一步便是要獲得介面許可權。

1．  介面許可權獲得方法

步驟一：繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。如果你使用了支付類介面，請確保支付目錄在該安全域名下，否則將無法完成支付。

備註：登入後可在“開發者中心”檢視對應的介面許可權。

步驟二：引入JS檔案

在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

請注意，如果你的頁面啟用了https，務必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統中成功使用JSSDK

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.js

備註：支援使用AMD/CMD 標準模組載入方法載入

步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置資訊

wx.config({

    debug: true, //開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。

    appId: '', //必填，公眾號的唯一標識

    timestamp: , //必填，生成簽名的時間戳

    nonceStr: '',//必填，生成簽名的隨機串

    signature:'',//必填，簽名，見附錄1

    jsApiList: []//必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

      其中最重要的一步就是簽名生成。簽名生成步驟：使用AppID和AppSecret呼叫本介面來獲取access_token，然後用拿到的access_token採用http GET方式請求獲得jsapi_ticket

成功返回如下JSON：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

     獲得jsapi_ticket之後，就可以生成JS-SDK許可權驗證的簽名了。

     簽名生成演算法：

       （簽名生成規則如下：參與簽名的欄位包括noncestr（隨機字串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分） 。對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1。這裡需要注意的是所有引數名均為小寫字元。對string1作sha1加密，欄位名和欄位值都採用原始值，不進行URL 轉義。）

        步驟1. 對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1

        步驟2.對string1進行sha1簽名，得到signature

2.呼叫介面實現上傳功能

當第一步中config介面注入許可權驗證配置完成後便能使用微信提供的介面來實現上傳功能了。

  wx.ready(function(){
 
    // 在這裡面呼叫微信介面
   debug: false,
      appId: '',
      timestamp:’’,
      nonceStr: '',
      signature: '',
      jsApiList: [
             //這裡是所要呼叫的介面名稱，因為要實現上傳，所以呼叫影象的四個介面
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage', 
       ]
    //在這裡寫具體呼叫介面的函式
});

完成了這步，我們的圖片已經上傳到微信的伺服器上了，接下來我們要做的是將圖片從微信伺服器上下載到自己的伺服器上。

3.下載上傳到微信伺服器上的圖片到自己伺服器

    每張圖片上傳到微信伺服器上會自動返回使用者一個media_id，使用者可以根據所返回media_id來下載圖片到自己的伺服器上 方法為：

$url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$token."&media_id=".$media_id."";
function http_get_data($url) {  
	  
	$ch = curl_init ();  
	curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' );  
	curl_setopt ( $ch, CURLOPT_SSL_VERIFYPEER, false );  
	curl_setopt ( $ch, CURLOPT_URL, $url );  
	ob_start ();  
	curl_exec ( $ch );  
	$return_content = ob_get_contents ();  
	ob_end_clean ();  
	  
	$return_code = curl_getinfo ( $ch, CURLINFO_HTTP_CODE );  
	return $return_content;  
} 
$return_content = http_get_data($url);  

這樣就完成了圖片的上傳

 四個介面的使用方法：

       拍照或從手機相簿中選圖介面

            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
    }
});

下載圖片介面

wx.downloadImage({
    serverId: '', // 需要下載的圖片的伺服器端ID，由uploadImage介面獲得
    isShowProgressTips: 1, // 預設為1，顯示進度提示
    success: function (res) {
        var localId = res.localId; // 返回圖片下載後的本地ID
    }
});