nodejs服務代碼

const express = require("express");
const fs = require("fs");const app = express();
// 展示html頁面
app.get("/", function (req, res) {res.sendFile(__dirname + "/index.html");
});// nodejs切片讀取文件示例
if (!Date.now()) {let i = 0const readableStream = fs.createReadStream('asai.mp4') + fs.createReadStream('asai1.mp4');readableStream.on('data', (chunk) => {i++console.log(666.123465, i, chunk);});readableStream.on('end', () => {console.log('數據讀取完畢');});
}// nodejs合并切片示例
// 方案一
if (!Date.now()) {const writeStream = fs.createWriteStream('asai-a.mp4');let readStreamfunction concatFiles(readfiles) {if (readfiles && readfiles[0]) {console.log(666.30002, readfiles[0])readStream = fs.createReadStream(readfiles[0]);readStream.pipe(writeStream, { end: false })readStream.on('end', () => {readfiles.shift()concatFiles(readfiles);});} else {writeStream.close();}readStream.on('error', (error) => { // 監聽錯誤事件，關閉可寫流，防止內存泄漏console.error(666.789, error);writeStream.close();});}concatFiles(['asai.mp4', 'asai1.mp4'])
}// 方案二
if (!Date.now()) {// 讀取一個文件，使用fs讀取文件獲取一個Buffer類型數據const buffer = fs.readFileSync('asai.mp4')// 將文件進行切分const file1 = buffer.subarray(0, 3000000)const file2 = buffer.subarray(3000000)// 全并多個切片文件const allfile = Buffer.concat([file1, file2])console.log(666.2008, allfile)// 讀取文件切片const s1 = fs.readFileSync('asai.mp4')const s2 = fs.readFileSync('asai1.mp4')// 將讀取的文件切片合并const bb = Buffer.concat([s1, s2])// 將合并的切片數據，寫到一個新文件中fs.writeFileSync('asai-c.mp4', bb)
}// 多視頻切片發送示例（咱不支持）
const videoData = {list: [// { path: 'asai1.mp4', size: fs.statSync('asai1.mp4').size },{ path: 'asai.mp4', size: fs.statSync('asai.mp4').size },],index: 0,curStart: 0,curSize: 0,totalSize: 0
}
videoData.totalSize = videoData.list.reduce((prev, cur) => {return prev + cur.size
}, 0)app.get("/video", function (req, res) {const range = req.headers.range;if (range) {resVideo(res, range)} else {const path = 'asai.mp4'const fileSize = fs.statSync(path).sizelet head = {'Content-Length': fileSize,'Content-Type': 'video/mp4',};res.writeHead(200, head);fs.createReadStream(path).pipe(res);res.status(400).send("Requires Range header");}
});app.listen(8000, function () {console.log("Listening on port 8000!");
});function resVideo(res, range) {console.log(666.10001, range)let [, start, end] = range.match(/(\d*)-(\d*)/);if (videoData.list[videoData.index]) {// if (start < videoData.curSize) {//     start = videoData.curSize// }// range = 'bytes=1458753-';// 保證request的header里面有range，沒有range就無法判斷需要把哪一部分content寫入response// const videoPath = "asai.mp4";const videoPath = videoData.list[videoData.index].path;const videoSize = videoData.list[videoData.index].size;// 還需要資源的路徑和資源的大小，資源的大小會用來計算哪一部分content要被sendconst CHUNK_SIZE = 10 ** 5; // 10 ** 6 ≈ 1MB// const start = Number(range.replace(/\D/g, "")); // 截取開始位置// 這里規定每次返回1M的內容，開始位置從request的header里獲取并將其轉成Number類型end = Math.min(end ? end : start + CHUNK_SIZE, videoData.curStart + videoSize - 1); // 截取結束位置console.log(666.10002, videoPath, { start, end, size: videoData.totalSize, startv: start - videoData.curStart, endv: end - videoData.curStart, sizev: videoSize }, (start >= videoData.curStart && start < end), videoData)// 這里需要使用fs來創建一個videoSteam，使用videoPath和start和end作為參數const videoStream = fs.createReadStream(videoPath, { start: start - videoData.curStart, end: end - videoData.curStart });// const newRange = `bytes ${start}-${end}/*`// const newRange = `bytes ${start}-${end}/1509200`// const newRange = `bytes ${start}-${end}/${videoSize}`const newRange = `bytes ${start}-${end}/${videoData.totalSize}`// 視頻發送狀態console.log(666.789, newRange)// 在響應頭里面我們需要返回Content的大小，Content-range，Accept-ranges，Content-type。const headers = {"If-Range": "Etag","Content-Range": newRange,"Accept-Ranges": "bytes","Content-Type": "multipart/byteranges",// "Content-Type": "video/mp4",// "Content-Length": CHUNK_SIZE,"Transfer-Encoding": "chunked",// 假如不知道內容長度，代替Content-Length};// 狀態碼設置為206表明我們返回的是部分內容。res.writeHead(206, headers);// 把videoStream pipe到response即可videoStream.pipe(res);// 手工記錄cursizevideoData.curSize = endif (end - videoData.curStart === videoSize - 1 && videoData.list[videoData.index + 1]) {videoData.curStart += videoData.list[videoData.index].sizevideoData.index += 1console.log(666.123, videoPath, 'send over.', videoData)}}
}

前端html頁面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>視頻/文件切片請求處理nodejs+html</title><style>body {max-width: 100%;height: 100vh;background-color: rgb(14, 14, 14);display: flex;margin: auto;align-items: center;justify-content: center;}</style>
</head><body><video height="100%" src="/video" controls autoplay muted></video>
</body></html>

附件：前端js切片上次

<html lang="zh-cn"><head><meta title="文件切片合并" />
</head><body><!-- 頁面選擇文件 --><input type="file" id="file" /><!-- 將加載的視頻文件進行切片后合并，并播放 --><video id="play" controls style="width:500px;height:auto"></video>
</body>
<script>file.addEventListener('change', async (e) => {// 獲取FileList中的File文件let file2 = file.files[0]// ----------第一種方式-------------------// 使用Blob的slice方法切片，使用Blob構造函數進行數據合并// 將加載的文件進行切片// let s1 = file2.slice(0,100)// let s2 = file2.slice(100)// 將切片的文件進行數據合并// let newFile = new Blob([s1,s2])// -----------第二種方式------------------// 如何對大文件進行流式讀取let chunckArr = []// 通過Blob獲取 ReadableStream 流對象，再獲取可讀的流讀取器let reader = file2.stream().getReader()let done = falsewhile (!done) {// 使用流讀取器的read方法，獲取流隊列中的下一個分塊數據let { value, done: readDone } = await reader.read()console.log(value)chunckArr.push(value)done = readDone}// 通過Blob構造函數合并流數據let newFile = new Blob(chunckArr)// 進行頁面播放play.setAttribute('src', URL.createObjectURL(newFile))})</script></html>