【Copy攻城獅日志】Node.js之http下載圖片失敗

darkbaby123 發(fā)布于2019-08-23 16:46 / 1363人閱讀

摘要：當用戶或搜索引擎向網(wǎng)站服務器發(fā)出瀏覽請求時，服務器返回的數(shù)據(jù)流中頭信息中的狀態(tài)碼的一種，表示本網(wǎng)頁永久性轉(zhuǎn)移到另一個地址。通過在源代碼中添加日志輸出，我們也能清楚地看到的狀態(tài)碼。

Created 2019-4-5 22:24:33 by huqi
Updated 2019-4-5 23:23:56 by huqi

↑開局一張圖，故事全靠編↑

從解答一個知否上的問題說起

有時候，自己就像自己在知否的簽名一樣--我以為的就是我以為的？一直以來，對前端技術(shù)的一知半解一葉障目，導致我遇到問題總是片面，比如這次，就翻車了。技術(shù)水平就那樣，然后我居然還想著幫人家解答，這不是誤人子弟嗎？昨天解答的這個問題，是關(guān)于node.js的http方法，根據(jù)Url獲取網(wǎng)絡圖片寫入到本地文件夾，這個需求我之前是玩過的，但用的是Copy&Paste的代碼，也沒有細細研究源碼，只知道用的是request的模塊，不過這次的哥們沒有依賴任何第三方模塊，只是用的內(nèi)置的http模塊。他遇到的問題就是上圖所見，有一張圖片沒有下載成功無法正常顯示。具體問題見@夜鷹：用Node.js讀取遠程的圖片文件并寫入本地？

通過內(nèi)置http模塊下載圖片源碼

引入內(nèi)置http模塊發(fā)起請求獲取文件

引入內(nèi)置fs模塊寫入文件

const http = require("http")
const fs = require("fs")

const urlArr = [
"http://img.zcool.cn/community/01e505554437be0000019ae95582a2.jpg@900w_1l_2o_100sh.jpg",
"http://static.pig66.com/uploadfile/2017/1102/20171102095531217.png",
]

urlArr.forEach(url => {
    getImg(url)
})

function getImg(url, name) {
    http.get(url, {encoding: null}, res => {
        let img = []
        let size = 0
        // 將圖片地址以【.】符號分割，取最后一項，即為格式后綴
        const _arr = url.split(".")
        const format = _arr[_arr.length - 1]
        // 如果沒有傳入圖片名字，則使用隨機數(shù)
        const _name = name ? name : "image-" + Math.floor(Number(new Date()) * Number(Math.random()))
        res.on("data", chunk => {
            img.push(chunk)
            size += chunk.length
        })
        res.on("end", () => {
            // 合并 Buffer
            const buffer = Buffer.concat(img, size)
            fs.writeFileSync(`img/${_name}.${format}`, buffer, (err) => {
                if (err) {
                    return console.error(err);
                }
                console.log("數(shù)據(jù)寫入成功！");
            })
        })
    })
}

對來說，起初我以為是文件太大的原因，因為通過輸出查看到Buffer數(shù)據(jù)中斷并直接結(jié)束了。后來我試了下1M左右的圖片，完全能夠成功下載，然而，打臉啪啪啪。接下來，我草率地下了結(jié)論，并丟給博主一段使用第三方模塊request的同樣功能的實現(xiàn)(見歷史版本：共被編輯 4 次)。真相糾結(jié)是怎樣的？另一位答主@啊哦已經(jīng)給出了相當明確的答案！

“罪魁禍首”--301重定向

301重定向（）頁面永久性移走）是一種非常重要的“自動轉(zhuǎn)向”技術(shù)。網(wǎng)址重定向最為可行的一種辦法。當用戶或搜索引擎向網(wǎng)站服務器發(fā)出瀏覽請求時，服務器返回的HTTP數(shù)據(jù)流中頭信息(header)中的狀態(tài)碼的一種，表示本網(wǎng)頁永久性轉(zhuǎn)移到另一個地址。

打開圖片鏈接：http://www.pig66.com/uploadfi...，通過查看Network，我們清晰地看到源圖片有做301重定向。通過在源代碼中添加日志輸出，我們也能清楚地看到301的狀態(tài)碼。

既然問題的根源已經(jīng)找到，那就對癥寫bug，如果是301的話獲取請求返回的真實地址再次發(fā)起請求。

        const { statusCode } = res
        if ( statusCode === 301 ) {
            const url = res.headers["location"]
            return getImg(url)
        }

修改后的代碼：

const http = require("http")
const fs = require("fs")

const urlArr = [
"http://img.zcool.cn/community/01e505554437be0000019ae95582a2.jpg@900w_1l_2o_100sh.jpg",
"http://static.pig66.com/uploadfile/2017/1102/20171102095531217.png",
]

urlArr.forEach(url => {
    getImg(url)
})

function getImg(url, name) {
    http.get(url, {encoding: null}, res => {
        const { statusCode } = res
        console.log(statusCode)
        if ( statusCode === 301 ) {
            const url = res.headers["location"]
            return getImg(url)
        }
        let img = []
        let size = 0
        // 將圖片地址以【.】符號分割，取最后一項，即為格式后綴
        const _arr = url.split(".")
        const format = _arr[_arr.length - 1]
        // 如果沒有傳入圖片名字，則使用隨機數(shù)
        const _name = name ? name : "image-" + Math.floor(Number(new Date()) * Number(Math.random()))
        res.on("data", chunk => {
            img.push(chunk)
            size += chunk.length
        })
        res.on("end", () => {
            // 合并 Buffer
            const buffer = Buffer.concat(img, size)
            fs.writeFileSync(`img/${_name}.${format}`, buffer, (err) => {
                if (err) {
                    return console.error(err);
                }
                console.log("數(shù)據(jù)寫入成功！");
            })
        })
    })
}

成功拿到圖片，并能直觀的感受到301重定向之后又發(fā)起了一次請求，

后記

這兩天朋友托我寫兩個簡單的頁面，我發(fā)現(xiàn)自己啥也不會！想想我，居然還這么熱心地去幫人解答，真的是誤人子弟害人不淺。謹以此次經(jīng)歷深刻反省自我，對被我坑過的各位表示深切的歉意。同時，也希望各位大佬不惜多多賜教!最后，祝@jsliang 生日快樂！寫在生日，一年前端拼搏記

云服務器 GPU云服務器攻城獅云服務器圖片下載失敗連接之云服務器失敗 http日志分析

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103263.html

發(fā)表評論

登陸后可評論

0條評論

darkbaby123

男|高級講師

我要關(guān)注我要私信

TA的文章

Vue項目環(huán)境搭建教程

閱讀 2718·2021-11-25 09:43
Java培訓學習之Java打包工具的介紹

閱讀 2099·2021-11-24 09:39
C++ string的深入理解

閱讀 1998·2021-11-17 09:33
趣米云：香港三網(wǎng)CN2云服務器,10M大帶寬,不用優(yōu)惠碼直購,月付26元起(附測評)

閱讀 2770·2021-09-27 14:11
一共收集整理了圖形20個，比較實用，同時也為了熟悉CSS的代碼。整合了一下，有錯誤歡迎指出。

閱讀 1883·2019-08-30 15:54
一個命令執(zhí)行多個npm任務

閱讀 3239·2019-08-26 18:27
1-4. Vue.js核心知識之事件處理

閱讀 1275·2019-08-23 18:00
從一道前端面試題談起

閱讀 1825·2019-08-23 17:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Copy攻城獅日志】Node.js之http下載圖片失敗

相關(guān)文章

**【Copy攻城獅日志】CML之5分鐘入門多端統(tǒng)一框架**

**【Copy攻城獅日志】借助Taro暴改Nideshop實現(xiàn)電商支付寶小程序雛形**

**【Copy攻城獅日志】踩坑小程序之can't read property 'of**

**【Copy攻城獅日志】踩坑小程序之使用svg作為圖標**

**【Copy攻城獅日志】踩坑小程序之canvas的顯示層級問題**

發(fā)表評論

0條評論

darkbaby123

男|高級講師

TA的文章

Vue項目環(huán)境搭建教程

Java培訓學習之Java打包工具的介紹

C++ string的深入理解

趣米云：香港三網(wǎng)CN2云服務器,10M大帶寬,不用優(yōu)惠碼直購,月付26元起(附測評)

一共收集整理了圖形20個，比較實用，同時也為了熟悉CSS的代碼。整合了一下，有錯誤歡迎指出。

一個命令執(zhí)行多個npm任務

1-4. Vue.js核心知識之事件處理

從一道前端面試題談起

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Copy攻城獅日志】Node.js之http下載圖片失敗

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！