微信小程序網(wǎng)絡(luò)之上傳下載（代碼篇）（5）

STEP 06 微信小程序代碼問題分析

源碼地址：https://github.com/CFETeam/weapp-demo-album

通訊所需要修改的host

這兒修改成自己的host，全局常量嘛
官方demo 是開發(fā)工具0.9版本出的篡悟，那時候有Promise 方法芹助，現(xiàn)已移除
直接運行會報如下錯誤：

promise錯誤

Promise is not a constructor

解決方案：
在request.js文件頭加上一個引用：

var Promise=require('./bluebird.min.js');
module.exports = (options) => {
    return new Promise((resolve, reject) => {
        options = Object.assign(options, {
            success(result) {
                if (result.statusCode === 200) {
                    resolve(result.data);
                } else {
                    reject(result);
                }
            },

            fail: reject,
        });

        console.log(options);
        wx.request(options);
    });
};

"bluebird.min.js"文件可以到百度官方下載（77.4kb）
這里涉及的ES5與ES6 可以參考其他文章學(xué)習(xí)
在api.js中：

var config = require('../config.js');

module.exports = {
    getUrl(route) {
        return `https://${config.host}${config.basePath}${route}`;
    },
};

即可看到訪問的api方法

STEP 07 微信相冊程序JS分析調(diào)試

/page/album/album.js就是我們的核心啦

onload方法

onLoad() {
        this.renderAlbumList();  這一步進行渲染相冊列表
 
        this.getAlbumList().then((resp) => {  request 訪問我們服務(wù)器再加載數(shù)據(jù)到頁面的"albumlist" list集合
            console.log(resp.data);

            this.setData({ 'albumList': this.data.albumList.concat(resp.data) });
            this.renderAlbumList(); 再次渲染
        });
    },

getAlbumList方法

// 獲取相冊列表
    getAlbumList() {
        this.showLoading('加載列表中…');
        setTimeout(() => this.hideLoading(), 1000);
        return request({ method: 'GET', url: api.getUrl('/list') });  
    },

打印出來的訪問：

{method: "GET", url: "https://www.wxapptest.cc/applet/album/list"}

renderAlbumList方法（這個不是重點）

// 渲染相冊列表 renderAlbumList() { let layoutColumnSize = this.data.layoutColumnSize; let layoutList = []; console.log(this.data.albumList.length); if (this.data.albumList.length) { console.log("失敗2"); layoutList = listToMatrix([0].concat(this.data.albumList), layoutColumnSize); console.log(layoutList); let lastRow = layoutList[layoutList.length - 1]; if (lastRow.length < layoutColumnSize) { let supplement = Array(layoutColumnSize - lastRow.length).fill(0); lastRow.push(...supplement); } } console.log("失敗3"); this.setData({ layoutList }); },

chooseImage方法（前面這么多廢話斟赚，就只是為了它镐侯！上傳）

// 從相冊選擇照片或拍攝照片
 
chooseImage() {
     wx.chooseImage({
         count: 9,
         sizeType: ['original', 'compressed'],
         sourceType: ['album', 'camera'],

         success: (res) => {
             this.showLoading('正在上傳圖片…');

             console.log(api.getUrl('/upload'));
             wx.uploadFile({
                 url: api.getUrl('/upload'),
                 filePath: res.tempFilePaths[0],
                 name: 'image',

                 success: (res) => {
                     let response = JSON.parse(res.data);

                     if (response.code === 0) {
                         console.log(response);

                         let albumList = this.data.albumList;
                         albumList.unshift(response.data.imgUrl);

                         this.setData({ albumList });
                         this.renderAlbumList();

                         this.showToast('圖片上傳成功');
                     } else {
                         console.log(response);
                     }
                 },

                 fail: (res) => {
                     console.log('fail', res);
                 },

                 complete: () => {
                     this.hideLoading();
                 },
             });

         },
     });
 },```
分析重點

   wx.uploadFile({
                url: api.getUrl('/upload'),    訪問的是這個： https://www.wxapptest.cc/applet/album/upload
                filePath: res.tempFilePaths[0],
                name: 'image',

                success: (res) => {
                    let response = JSON.parse(res.data);

                    if (response.code === 0) {
                        console.log(response);

                        let albumList = this.data.albumList;
                        albumList.unshift(response.data.imgUrl);   獲取上傳后的img的url

                        this.setData({ albumList });
                        this.renderAlbumList();  重新刷新渲染頁面

                        this.showToast('圖片上傳成功');
                    } else {
                        console.log(response);
                    }
                },

                fail: (res) => {
                    console.log('fail', res);
                },

                complete: () => {
                    this.hideLoading();
                },
            });

大致效果如下：

![504.gif](http://upload-images.jianshu.io/upload_images/3362699-f4076980b517dc68.gif?imageMogr2/auto-orient/strip)

![服務(wù)端問題搀继，前文提過](http://upload-images.jianshu.io/upload_images/3362699-8176533d78578c8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

出現(xiàn)這個問題莫慌。分析問題出在哪兒，是APP端問題還是SERVER響應(yīng)問題
先從APP端debug開始：
#####1.分析APP請求
![請求是發(fā)送成功的了](http://upload-images.jianshu.io/upload_images/3362699-b5b7374221827137.gif?imageMogr2/auto-orient/strip)
只是服務(wù)器返回的執(zhí)行的是fail 方法懈万，說明APP沒問題

![詳細](http://upload-images.jianshu.io/upload_images/3362699-470e7973d30f312c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
uploadfile方法其實很簡單女仰，但是我們要學(xué)會分析問題的方法
我們繼續(xù)追蹤到這個請求酱讶，看服務(wù)器有沒有接收到
>從APP到nginx到nodejs再到對象服務(wù)器（COS）

#####2.接著我們開始查nginx 的log日志
nginx日志在**/etc/nginx/logs**文件夾下
```cd /etc/nginx/logs
tail www.qcloud.la.error.log  //查看```
![查看日志](http://upload-images.jianshu.io/upload_images/3362699-a7a9ecb4892f3464.gif?imageMogr2/auto-orient/strip)

貼上日志：

2016/12/05 01:16:15 [error] 3731#3731: *10 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:17:10 [error] 3731#3731: *14 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/alb
![Uploading 77554422121jdf2322w_667991.gif . . .]um/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:23:29 [error] 3731#3731: *16 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:23:53 [error] 3731#3731: *20 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:25:00 [error] 3731#3731: *23 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:26:54 [error] 3731#3731: *28 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"

發(fā)現(xiàn)nginx服務(wù)器能接受此stream請求交掏，說明nginx并沒有問題

#####3.接著我們開始查nodejs的log日志
前文中說過

pm2 show 0 指令標(biāo)明了nodejs進程運行的日志路徑

打開到根路徑：

cd /root/.pm2/logs
tail album-out.log

操作如下：


![接收到請求](http://upload-images.jianshu.io/upload_images/3362699-c9ab9e3da4159a15.gif?imageMogr2/auto-orient/strip)

tail album-out.log

POST /applet/album/upload - - - - ms
GET /applet/album/list 200 36 - 18.726 ms
GET /applet/album/list 200 36 - 17.683 ms
POST /applet/album/upload - - - - ms
POST /applet/album/upload - - - - ms
POST /applet/album/upload - - - - ms
GET /applet/album/list 200 36 - 16.605 ms
GET /applet/album/list 200 36 - 19.785 ms
GET /applet/album/list 200 36 - 19.398 ms
POST /applet/album/upload - - - - ms

日志已經(jīng)接收到了POST方法沈条，沒毛病
所以酣难，對于此項目我折騰很久也沒運行起來（主要我并不會nodejs而且COS新版SDK沒時間去看）
總結(jié)出是nodejs項目與COS直接的讀取存儲接口發(fā)生了問題

#####downloadImage方法

// 下載圖片
downloadImage() {
this.showLoading('正在保存圖片…');
console.log('download_image_url', this.data.imageInAction);

    wx.downloadFile({
        url: this.data.imageInAction,
        type: 'image',
        success: (resp) => {
            wx.saveFile({
                tempFilePath: resp.tempFilePath,
                success: (resp) => {
                    this.showToast('圖片保存成功');
                },

                fail: (resp) => {
                    console.log('fail', resp);
                },

                complete: (resp) => {
                    console.log('complete', resp);
                    this.hideLoading();
                },
            });
        },

        fail: (resp) => {
            console.log('fail', resp);
        },
    });

    this.setData({ showActionsSheet: false, imageInAction: '' });
},```

其實前面講了那么多了让虐，這個wx.downloadFile()方法顯得特別容易理解了
那些重復(fù)的話我就不寫了

針對了騰訊相冊這個demo寫了4篇進行了梳理紊撕，雖然最后沒跑通，或許是實力欠缺赡突，但是騰訊也太坑了对扶。四篇文章梳理一個完整的全程小程序搭建已經(jīng)網(wǎng)絡(luò)通訊的分析調(diào)試

此系列若有講錯的地方，請各位給點建議惭缰，互相學(xué)習(xí)共同提高＠四稀！从媚！

最后編輯于：2017.12.04 23:07:45

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末逞泄，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子拜效，更是在濱河造成了極大的恐慌喷众，老刑警劉巖，帶你破解...
沈念sama閱讀 218,122評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件紧憾，死亡現(xiàn)場離奇詭異到千，居然都是意外死亡，警方通過查閱死者的電腦和手機赴穗，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,070評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門憔四，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人般眉，你說我怎么就攤上這事了赵。” “怎么了甸赃？”我有些...
開封第一講書人閱讀 164,491評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵柿汛，是天一觀的道長。經(jīng)常有香客問我埠对，道長络断，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,636評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任项玛，我火速辦了婚禮貌笨，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘襟沮。我一直安慰自己锥惋，他們只是感情好昌腰，可當(dāng)我...
茶點故事閱讀 67,676評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著净刮，像睡著了一般剥哑。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上淹父，一...
開封第一講書人閱讀 51,541評論 1贊 305
城市分裂傳說
那天株婴，我揣著相機與錄音，去河邊找鬼暑认。笑死困介，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的蘸际。我是一名探鬼主播座哩，決...
沈念sama閱讀 40,292評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼粮彤！你這毒婦竟也來了根穷？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,211評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤导坟，失蹤者是張志新（化名）和其女友劉穎屿良，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惫周，經(jīng)...
沈念sama閱讀 45,655評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡尘惧，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,846評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了递递。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喷橙。...
茶點故事閱讀 39,965評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖登舞，靈堂內(nèi)的尸體忽然破棺而出贰逾，到底是詐尸還是另有隱情，我是刑警寧澤菠秒，帶...
沈念sama閱讀 35,684評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布似踱，位于F島的核電站，受9級特大地震影響稽煤，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜囚戚，卻給世界環(huán)境...
茶點故事閱讀 41,295評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一酵熙、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧驰坊，春花似錦匾二、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,894評論 0贊 22
一樁弒父案察藐，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽皮璧。三九已至，卻和暖如春分飞，著一層夾襖步出監(jiān)牢的瞬間悴务，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,012評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工譬猫，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留讯檐，地道東北人。一個月前我還...
沈念sama閱讀 48,126評論 3贊 370
代替公主和親
正文我出身青樓染服，卻偏偏與公主長得像别洪，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子柳刮，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,914評論 2贊 355