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

darkbaby123 發布于2019-08-23 16:46 / 1353人閱讀

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

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

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

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

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

通過內置http模塊下載圖片源碼

引入內置http模塊發起請求獲取文件

引入內置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]
        // 如果沒有傳入圖片名字，則使用隨機數
        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("數據寫入成功！");
            })
        })
    })
}

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

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

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

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

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

        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]
        // 如果沒有傳入圖片名字，則使用隨機數
        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("數據寫入成功！");
            })
        })
    })
}

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

后記

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103263.html

【Copy攻城獅日志】CML之5分鐘入門多端統一框架

摘要：開局一張圖，故事全靠編是啥變色龍又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統一開發框架，可以說前端技術從年到年又發生了天翻地覆的變化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

MycLambert 2019-08-23 16:47 評論0 收藏0
【Copy攻城獅日志】借助Taro暴改Nideshop實現電商支付寶小程序雛形

摘要：接下來，在支付寶小程序開發者工具中打，不出意外能跑起來一個電商支付寶小程序雛形。地址以上是我這個攻城獅對使用轉換原生微信小程序為支付寶小程序的一次微不足道的實踐。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開局一張圖，故事全靠編↑ 從一個需求說起作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一...

gnehc 2019-08-23 14:54 評論0 收藏0
【Copy攻城獅日志】踩坑小程序之can't read property 'of

摘要：根據當時的情境，是在微信開發者工具中刪掉該小程序然后重新載入就解決了，大家給出的結論是微信小程序開發者工具的。 Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqishowImg(https://segmentfault.com/img/bVbqOLH?w=1526&h=818); ↑開局一張圖，故事全靠編...

hsluoyz 2019-08-26 13:42 評論0 收藏0
【Copy攻城獅日志】踩坑小程序之使用svg作為圖標

摘要：可以使用網絡圖片，或者，或者使用標簽。這個是常識，連入門級小程序員都知道的。那我究竟寫了個什么毫無疑問，一定是在中直接引用了本地圖片。雖然可以將圖標轉化為字體應用，但對于我來說，就使用那么幾個圖標，實在是不想引用一大堆等文件，只想用下。 Created 2019-4-4 22:02:27 by huqi Updated 2019-4-4 23:12:34 by huqi show...

Miracle_lihb 2019-08-23 16:45 評論0 收藏0
【Copy攻城獅日志】踩坑小程序之canvas的顯示層級問題

摘要：依舊是很簡單的需求，但是對于資深的攻城獅來說，除了布局，其他的就只能去了。特別是真機跑的時候，問題特別多。還是坑在基礎不牢固，文檔看得不深入，對小程序原生組件應該注意的事項把握不準，才會掉入這個非常基礎的坑。 Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12:22 by huqi showImg(https://segmen...

Coly 2019-08-23 16:43 評論0 收藏0