1.完整實(shí)現(xiàn)ios和安卓微信環(huán)境選擇微信相冊(cè)圖片并上傳保存在本地
2.注意js版本兼容，使用該版本

七臺(tái)河ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書(shū)合作）期待與您的合作！

官方解釋

3.本實(shí)例流程將先調(diào)用wx.chooseImage接口獲取選擇的圖片localId，返回localId在安卓微信可以作為img標(biāo)簽的src屬性顯示圖片，但在ios下需要再調(diào)用wx.getLocalImgData接口來(lái)顯示圖片，然后要保存圖片需調(diào)用wx.uploadImage接口將圖片上傳至微信服務(wù)器返回serverId，將serverId放至隱藏域提交后端，由后端調(diào)用微信多媒體接口下載保存到自己服務(wù)器，多媒體獲取接口為：

http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="token()"&media_id="serverId"

4.前端核心代碼如下：

.....
.....
        

            

                

            
            {volist name='question.reply_img' id='item'}
                {if condition="$item"}
                  

                    
                    
                    
                  
                {/if}
            {/volist}
        
.....
.....
wx.config({
            // 配置信息, 即使不正確也能使用 wx.ready
            debug: false,
            appId:"{$signPackage.appId}",
            timestamp:"{$signPackage.timestamp}",
            nonceStr:"{$signPackage.nonceStr}",
            signature:"{$signPackage.signature}",
            jsApiList: [
                // 所有要調(diào)用的 API 都要加到這個(gè)列表中
                'uploadImage',
                'chooseImage',
                'getLocalImgData',
            ]
        });
        var imgContainer = document.getElementsByClassName("upload-box")[0];
        $("#uploaderBox").on("click", function(e) {
           wx.chooseImage({
                count: 9, // 默認(rèn)9
                sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
                sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
                    var i = 0, length = localIds.length;//循環(huán)操作9張圖片
                    function upload() {
                        var serverId = '';
                       wx.uploadImage({
                            localId: localIds[i], // 需要上傳的圖片的本地ID，由chooseImage接口獲得
                            isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
                            success: function (res) {
                                serverId = res.serverId; // 返回圖片的服務(wù)器端ID
                                if(agent_type == 'android')
                                {
                                    var localData = localIds[i]; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示
                                    //追加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數(shù)據(jù)，可以用img標(biāo)簽顯示
                                            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";
                }
            }

效果截圖

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：使用微信JS-SDK圖像接口上傳圖片簡(jiǎn)單實(shí)例-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://weahome.cn/article/ddoshc.html