筆者最近在做一些node端的檔案讀寫和分片上傳工作,在這個過程中,發現node讀取的檔案如果超過2G,超過了讀取Blob最大值,會出現讀取異常,此外在node中讀寫檔案也受伺服器RAM的限制等,需要分片讀取,本人記錄一下遇到的問題以及解決問題的經過。 【相關教學推薦:nodejs影片教學】
- node中的檔案讀寫
- node檔案讀寫RAM和Blob大小的限制
- 其他
常規的,如果我們要讀取一個比較小的文件,可以直接通過:
const fs = require('fs') let data = fs.readFileSync("./test.png") console.log(data,123) //输出data = <Buffer 89 50 4e ...>
一般而言,同步的方法不是很推薦,因為js/nodejs是單線程的,同步的方法會阻塞主執行緒。最新版的node直接提供了fs.promise,可以結合async/await直接使用:
const fs = require('fs') const readFileSync = async () => { let data = await fs.promises.readFile("./test.png") console.log(data,123) } readFileSync() //输出data = <Buffer 89 50 4e ...>
這裡透過非同步的方法呼叫不會阻塞主線程,多個檔案讀取的IO也可以並行進行等。
常規的檔案讀寫,我們會把檔案一次的讀取到記憶體中,這個方法時間效率與記憶體效率都很低,時間效率低是指必須要一次讀取完畢後才能執行後續才做,內存效率低是指必須把這個文件都一次性讀取放入內存中,很佔用內存。因此這種情況下,我們一般會使用Stream來進行檔案的讀取:
const fs = require('fs') const readFileTest = () => { var data = '' var rs = fs.createReadStream('./test.png'); rs.on('data', function(chunk) { data += chunk; console.log(chunk) }); rs.on('end',function(){ console.log(data); }); rs.on('error', function(err){ console.log(err.stack); }); } readFileTest() // data = <Buffer 89 50 64 ...>
透過Steam來進行檔案讀寫,可以提高記憶體效率和時間效率。
Stream的檔案也支援第二種寫法:
const fs = require('fs') const readFileTest = () => { var data = '' var chunk; var rs = fs.createReadStream('./test.png'); rs.on('readable', function() { while ((chunk=rs.read()) != null) { data += chunk; }}); rs.on('end', function() { console.log(data) }); }; readFileTest()
const fs = require('fs') const readFileTest = async () => { let data = await fs.promises.readFile("./video.mp4") console.log(data) } readFileTest()執行上述的程式碼會錯誤:RangeError [ERR_FS_FILE_TOO_LARGE]: File size (2246121911) is greater than 2 GB
const fs = require('fs') const readFileTest = () => { var data = '' var rs = fs.createReadStream('./video.mp4'); rs.on('data', function(chunk) { data += chunk; }); rs.on('end',function(){ console.log(data); }); rs.on('error', function(err){ console.log(err.stack); }); } readFileTest()
data += chunk; ^ RangeError: Invalid string length
2.2 分片讀取
const info = await fs.promises.stat(filepath) const size = info.size###依照指定的SIZE分片(例如128M一個分片)######
const SIZE = 128 * 1024 * 1024 let sizeLen = Math.floor(size/SIZE) let total = sizeLen +1 ; for(let i=0;i<=sizeLen;i++){ if(sizeLen ===i){ console.log(i*SIZE,size,total,123) readStremfunc(i*SIZE,size,total) }else{ console.log(i*SIZE,(i+1)*SIZE,total,456) readStremfunc(i*SIZE,(i+1)*SIZE-1,total) } } //分片后【0,128M】,【128M, 256M】...###3.實作讀取函數###
const readStremfunc = () => { const readStream = fs.createReadStream(filepath,{start:start,end:end}) readStream.setEncoding('binary') let data = '' readStream.on('data', chunk => { data = data + chunk }) readStream.end('data', () => { ... }) }### 值得注意的是fs.createReadStream(filepath,{ start,end}),start和end是前閉後閉的,例如fs.createReadSteam(filepath,{start:0,end:1023})讀取的是[0,1023]總共1024個bit。 #########三、其他############3.1 擴充瀏覽器端的大檔案讀取與寫入######### 前面將了大檔案在nodejs中的讀取,那麼在瀏覽器端會讀取大檔案會有什麼問題嗎? ###
浏览器在本地读取大文件时,之前有类似FileSaver、StreamSaver等方案,不过在浏览器本身添加了File的规范,使得浏览器本身就默认和优化了Stream的读取。我们不需要做额外的工作,相关的工作:github.com/whatwg/fs。不过不同的版本会有兼容性的问题,我们还是可以通过FileSaver等进行兼容。
如果是在浏览器中获取静态资源大文件,一般情况下只需要通过range分配请求即可,一般的CDN加速域名,不管是阿里云还是腾讯云,对于分片请求都支持的很好,我们可以将资源通过cdn加速,然后在浏览器端直接请求cdn加速有的资源。
分片获取cdn静态资源大文件的步骤为,首先通过head请求获取文件大小:
const getHeaderInfo = async (url: string) => { const res: any = await axios.head(url + `?${Math.random()}`); return res?.headers; }; const header = getHeaderInfo(source_url) const size = header['content-length']
我们可以从header中的content-length属性中,获取文件的大小。然后进行分片和分段,最后发起range请求:
const getRangeInfo = async (url: string, start: number, end: number) => { const data = await axios({ method: 'get', url, headers: { range: `bytes=${start}-${end}`, }, responseType: 'blob', }); return data?.data; };
在headers中指定 range: bytes=${start}-${end}
,就可以发起分片请求去获取分段资源,这里的start和end也是前闭后闭的。
更多node相关知识,请访问:nodejs 教程!
以上是淺析Nodejs怎麼進行大檔案讀寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!