本文小編為大家詳細(xì)介紹“Node中http模塊如何處理文件上傳”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Node中http模塊如何處理文件上傳”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
創(chuàng)新互聯(lián)主營筠連網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,筠連h5小程序制作搭建,筠連網(wǎng)站營銷推廣歡迎筠連等地區(qū)企業(yè)咨詢
如果我們現(xiàn)在向服務(wù)器發(fā)送的數(shù)據(jù)如下圖所示,里面包含了普通的字段信息 name
以及一個圖片文件 file
:
我們先來看看如何在服務(wù)器接收到文件上傳的數(shù)據(jù),并在調(diào)試控制臺打印查看:
const http = require('http')
const server = http.createServer((req, res) => {
req.setEncoding('binary')
req.on('data', data => {
console.log(data)
})
req.on('end', () => {
console.log('上傳結(jié)束')
res.end('上傳成功')
})
})
server.listen(3010, () => console.log('服務(wù)器開啟'))
想要能看懂打印的結(jié)果,我們通過 req.setEncoding('binary')
設(shè)置了字符編碼為 'binary'
,這樣得到的數(shù)據(jù)就不是 buffer 對象而是 ASCII 編碼后的字符串,我們就可以使用一些字符串的方法來處理數(shù)據(jù)了。
但是當(dāng)文件大小比較大時,直接通過在命令行輸入 node 或 nodemon 來運(yùn)行代碼,得到的數(shù)據(jù)無法完全在控制臺展示。所以我們可以在要打印請求數(shù)據(jù)的地方打上斷點(diǎn),通過 debugger 的模式來運(yùn)行代碼:
點(diǎn)擊 "運(yùn)行和調(diào)試" 后,vs code 就會幫我們把服務(wù)器運(yùn)行起來了:
之后當(dāng)我們發(fā)送了上傳的請求,再點(diǎn)擊下圖右上角的 "單步跳過",就可以看到請求的數(shù)據(jù)了 —— 那些可以被 ASCII 編譯的信息,比如英文字母,可以直接看到了,而圖片的數(shù)據(jù)則是一堆亂碼:
接下來就是處理獲取的請求數(shù)據(jù),將里面的圖片數(shù)據(jù)截取出來然后通過寫入流生成圖片。
獲取圖片數(shù)據(jù)
因?yàn)榭勺x流的 'data'
事件一次最多讀取 64kb 的數(shù)據(jù),當(dāng)圖片比較大時,可能會觸發(fā)多次,所以我們定義變量 reqData
來存儲請求發(fā)來的數(shù)據(jù):
let reqData = ''
req.on('data', data => {
reqData += data
})
req.on('end', () => {
console.log(reqData) // 在這行打斷點(diǎn)
res.end('上傳成功')
})
當(dāng) req
觸發(fā)了 'end'
事件說明請求數(shù)據(jù)讀取完畢,如果在上列代碼的第 6 行 console.log(reqData)
處打個斷點(diǎn),然后查看 reqData
,得到的數(shù)據(jù)如下:
圖片的數(shù)據(jù)應(yīng)該是 image/png\r\n\r\n
與 \r\n----------------------------158329774739626517859573--\r\n
中間這段。我們可以去獲取圖片數(shù)據(jù)的起(imgDataStartIndex
)止(imgDataEndIndex
)位置的 index,然后使用 substring()
做個截取,最后再使用 trim()
方法去除首位的空格 \r\n
:
const imgType = 'image/png'
const imgDataStartIndex = reqData.indexOf(imgType) + imgType.length
const imgDataEndIndex = reqData.indexOf(`--${boundary}--`)
const imgData = reqData.substring(imgDataStartIndex, imgDataEndIndex).trim()
--------------------------158329774739626517859573
是客戶端隨機(jī)生成的,用于分割表單里的每段數(shù)據(jù)的分隔符(boundary),在每個表單項(xiàng)的開頭和結(jié)尾都有,并且在開頭處的前面都會加上兩個減號 --
,在整個表單數(shù)據(jù)結(jié)束處的末尾也會加上兩個減號。查看請求頭:
可以發(fā)現(xiàn)在 content-type
里定義了boundary
,于是我們可以使用如下方法獲取分隔符:
const boundary = req.headers['content-type'].split('boundary=')[1]
生成圖片
獲取到了圖片數(shù)據(jù) imgData
后,就可以通過 fs 的 writeFile()
寫入文件生成圖片了:
fs.writeFile('./img.png', imgData, 'binary', err => {
if (!err) console.log('圖片寫入成功')
})
注意需要在第三個參數(shù)傳入'binary'
來設(shè)定 encoding
。
現(xiàn)將代碼匯總?cè)缦拢?/p>
const http = require('http')
const fs = require('fs')
const server = http.createServer((req, res) => {
req.setEncoding('binary')
const boundary = req.headers['content-type'].split('boundary=')[1]
let reqData = ''
req.on('data', data => {
reqData += data
})
req.on('end', () => {
const imgType = 'image/png'
const imgDataStartIndex = reqData.indexOf(imgType) + imgType.length
const imgDataEndIndex = reqData.indexOf(`--${boundary}--`)
const imgData = reqData.substring(imgDataStartIndex, imgDataEndIndex).trim()
fs.writeFile('./img.png', imgData, 'binary', err => {
if (!err) console.log('圖片寫入成功')
})
res.end('上傳成功')
})
})
server.listen(3010, () => console.log('服務(wù)器開啟'))
上述代碼能夠成功運(yùn)行還有一些限制,比如只能處理單文件上傳,且文件需要是 png 格式的圖片,并且放在表單最后一項(xiàng)。文章的目的在于簡單了解使用 node 的 http 模塊搭建的服務(wù)器大體上是如何處理上傳文件的請求的,為將來深入學(xué)習(xí)其它基于 http 模塊的框架(express.js、koa.js 等)打好基礎(chǔ)。
讀到這里,這篇“Node中http模塊如何處理文件上傳”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。