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

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

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

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

↑開(kāi)局一張圖，故事全靠編↑

從解答一個(gè)知否上的問(wèn)題說(shuō)起

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

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

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

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

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
        // 將圖片地址以【.】符號(hào)分割，取最后一項(xiàng)，即為格式后綴
        const _arr = url.split(".")
        const format = _arr[_arr.length - 1]
        // 如果沒(méi)有傳入圖片名字，則使用隨機(jī)數(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ù)寫(xiě)入成功！");
            })
        })
    })
}

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

“罪魁禍?zhǔn)住?-301重定向

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

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

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

        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
        // 將圖片地址以【.】符號(hào)分割，取最后一項(xiàng)，即為格式后綴
        const _arr = url.split(".")
        const format = _arr[_arr.length - 1]
        // 如果沒(méi)有傳入圖片名字，則使用隨機(jī)數(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ù)寫(xiě)入成功！");
            })
        })
    })
}

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

后記

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103263.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

darkbaby123

男|高級(jí)講師

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

TA的文章

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

閱讀 2772·2021-11-25 09:43
Java培訓(xùn)學(xué)習(xí)之Java打包工具的介紹

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

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

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

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

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

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

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

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

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

**【Copy攻城獅日志】踩坑小程序之canvas的顯示層級(jí)問(wèn)題**

發(fā)表評(píng)論

0條評(píng)論

darkbaby123

男|高級(jí)講師

TA的文章

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

Java培訓(xùn)學(xué)習(xí)之Java打包工具的介紹

C++ string的深入理解

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

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

一個(gè)命令執(zhí)行多個(gè)npm任務(wù)

1-4. Vue.js核心知識(shí)之事件處理

從一道前端面試題談起

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！