Node.js简介：
当谈论Node.js时，通常指的是一个基于Chrome V8 JavaScript引擎构建的开源、跨平台的JavaScript运行时环境。以下是一些Node.js的内容：
-
事件驱动编程：Node.js采用了事件驱动的编程范式，这意味着它可以异步地执行I/O操作，而无需阻塞进程或线程。这种方法可以提高应用程序的性能和响应性。
-
模块化：Node.js支持模块化编程，因此开发人员可以将代码分解为可重用的模块。Node.js中的每个文件都被视为一个模块，可以使用require()函数将其导入到其他文件中。
-
NPM：Node.js拥有一个名为NPM（Node Package Manager）的包管理器，它允许开发人员轻松地查找、安装和管理他们的依赖项。
-
HTTP模块：Node.js包含一个内置的HTTP模块，使开发人员能够轻松地创建Web服务器和客户端。
-
文件系统模块：Node.js还包括一个内置的文件系统模块，允许开发人员访问和操作文件系统。
-
单线程：虽然Node.js是单线程的，但它可以通过异步编程技术来避免阻塞。这意味着在单个线程中，可以同时处理多个请求，从而提高应用程序的性能。
-
跨平台：由于Node.js是基于JavaScript编写的，因此可以在Windows、Linux、Mac OS等多个平台上运行。
这只是Node.js的一小部分内容，但它们提供了Node.js如此流行的一些关键功能和特点。
前言
平常业务需求：上传图片、Excel等，毕竟几M的大小可以很快就上传到服务器。
针对于上传视频等大文件几百M或者几G的大小，就需要等待比较长的时间。
这就产生了对应的解决方法，对于大文件上传时的暂停、断网、网络较差的情况下， 使用切片+断点续传就能够很好的应对上述的情况,
方案分析
-
切片
- 就是对上传视频进行切分，具体操作为：
-
File.slice(start,end)：返回新的blob对象
- 拷贝blob的起始字节
- 拷贝blob的结束字节
-
断点续传
- 每次切片上传之前，请求服务器接口，读取相同文件的已上传切片数
- 上传的是新文件，服务端则返回0，否则返回已上传切片数
具体解决流程
该demo提供关键点思路及方法，其他功能如：文件限制，lastModifiedDate校验文件重复性，缓存文件定期清除等功能扩展都可以在此代码基础上添加。
html 部分
-
<
input
class
=
"video"
type
=
"file"
/
>
-
<button
type
=
"submit" onclick
=
"handleVideo(event, '.video', 'video')"
>
-
提交
-
<
/button
>
script 部分
-
let count
=
0;
/
/ 记录需要上传的文件下标
-
const handleVideo
= async (event, name, url)
=
> {
-
/
/ 阻止浏览器默认表单事件
-
event.preventDefault();
-
let currentSize
= document.querySelector(
"h2");
-
let files
= document.querySelector(name).files;
-
/
/ 默认切片数量
-
const sectionLength
=
100;
-
/
/ 首先请求接口，获取服务器是否存在此文件
-
/
/
count为
0则是第一次上传，
count不为
0则服务器存在此文件，返回已上传的切片数
-
count
= await handleCancel(files[
0]);
-
-
/
/ 申明存放切片的数组对象
-
let fileCurrent
= [];
-
/
/ 循环
file文件对象
-
for (const
file
of [...files]) {
-
/
/ 得出每个切片的大小
-
let itemSize
= Math.ceil(
file.
size
/ sectionLength);
-
/
/ 循环文件
size，文件blob存入数组
-
let current
=
0;
-
for (current; current
<
file.
size; current
+
= itemSize) {
-
fileCurrent.push({
file:
file.slice(current, current
+ itemSize) });
-
}
-
/
/ axios模拟手动取消请求
-
const CancelToken
= axios.CancelToken;
-
const
source
= CancelToken.
source();
-
/
/ 当断点续传时，处理切片数量，已上传切片则不需要再次请求上传
-
fileCurrent
=
-
count
=
=
=
0 ? fileCurrent : fileCurrent.slice(
count, sectionLength);
-
/
/ 循环切片请求接口
-
for (const [
index, item]
of fileCurrent.entries()) {
-
/
/ 模拟请求暂停 || 网络断开
-
if (
index
>
90) {
-
source.
cancel(
"取消请求");
-
}
-
/
/ 存入文件相关信息
-
/
/
file为切片blob对象
-
/
/ filename为文件名
-
/
/
index为当前切片数
-
/
/ total为总切片数
-
let formData
= new FormDat
a();
-
formData.append(
"file", item.
file);
-
formData.append(
"filename",
file.name);
-
formData.append(
"total", sectionLength);
-
formData.append(
"index",
index
+
count
+
1);
-
-
await axios({
-
url: `http:
/
/localhost:
8080
/${url}`,
-
method:
"POST",
-
data: formData,
-
cancelToken:
source.token,
-
})
-
.
then((response)
=
> {
-
/
/ 返回数据显示进度
-
currentSize.innerHTML
= `进度${response.
data.
size}%`;
-
})
-
.catch((err)
=
> {
-
console.log(err);
-
});
-
}
-
}
-
};
-
-
/
/ 请求接口，查询上传文件是否存在
-
/
/
count为
0表示不存在，
count不为
0则已上传对应切片数
-
const handleCancel
= (
file)
=
> {
-
return axios({
-
method:
"post",
-
url:
"http://localhost:8080/getSize",
-
headers: {
"Content-Type":
"application/json; charset = utf-8" },
-
data: {
-
fileName:
file.name,
-
},
-
})
-
.
then((res)
=
> {
-
return res.
data.
count;
-
})
-
.catch((err)
=
> {
-
console.log(err);
-
});
-
};
node服务端 部分
-
/
/ 使用express构建服务器api
-
const express
= require(
"express");
-
/
/ 引入上传文件逻辑代码
-
const upload
= require(
"./upload_file");
-
/
/ 处理所有响应，设置跨域
-
app.
all(
"*", (req, res,
next)
=
> {
-
res.header(
"Access-Control-Allow-Origin",
"*");
-
res.header(
"Access-Control-Allow-Headers",
"X-Requested-With");
-
res.header(
"Access-Control-Allow-Methods",
"PUT,POST,GET,DELETE,OPTIONS");
-
res.header(
"Access-Control-Allow-Headers",
"Content-Type, X-Requested-With ");
-
res.header(
"X-Powered-By",
" 3.2.1");
-
res.header(
"Content-Type",
"application/json;charset=utf-8");
-
next();
-
});
-
const app
= express();
-
-
app.
use(bodyParser.json({
type:
"application/*+json" }));
-
/
/ 视频上传（查询当前切片数）
-
app.post(
"/getSize", upload.getSize);
-
/
/ 视频上传接口
-
app.post(
"/video", upload.video);
-
-
/
/ 开启本地端口侦听
-
app.listen(
8080);
- upload_file
-
/
/ 文件上传模块
-
const formidable
= require(
"formidable");
-
/
/ 文件系统模块
-
const fs
= require(
"fs");
-
/
/ 系统路径模块
-
const path
= require(
"path");
-
-
/
/ 操作写入文件流
-
const handleStream
= (item, writeStream)
=
> {
-
/
/ 读取对应目录文件buffer
-
const readFile
= fs.readFileSync(item);
-
/
/ 将读取的buffer || chunk写入到stream中
-
writeStream.
write(readFile);
-
/
/ 写入完后，清除暂存的切片文件
-
fs.unlink(item, ()
=
> {});
-
};
-
-
/
/ 视频上传(切片)
-
module.exports.video
= (req, res)
=
> {
-
/
/ 创建解析对象
-
const form
= new formidable.IncomingForm();
-
/
/ 设置视频文件上传路径
-
let dirPath
= path.join(__dirname,
"video");
-
form.uploadDir
= dirPath;
-
/
/ 是否保留上传文件名后缀
-
form.keepExtensions
=
true;
-
/
/ err 错误对象 如果解析失败包含错误信息
-
/
/ fields 包含除了二进制以外的formData的key-value对象
-
/
/
file 对象类型 上传文件的信息
-
form.parse(req, async (err, fields,
file)
=
> {
-
/
/ 获取上传文件blob对象
-
let files
=
file.
file;
-
/
/ 获取当前切片
index
-
let
index
= fields.
index;
-
/
/ 获取总切片数
-
let total
= fields.total;
-
/
/ 获取文件名
-
let filename
= fields.filename;
-
/
/ 重写上传文件名，设置暂存目录
-
let url
=
-
dirPath
+
-
"/"
+
-
filename.split(
".")[
0]
+
-
`_${
index}.`
+
-
filename.split(
".")[
1];
-
try {
-
/
/ 同步修改上传文件名
-
fs.renameSync(files.path, url);
-
console.log(url);
-
/
/ 异步处理
-
setTimeout(()
=
> {
-
/
/ 判断是否是最后一个切片上传完成，拼接写入全部视频
-
if (
index
=
=
= total) {
-
/
/ 同步创建新目录，用以存放完整视频
-
let newDir
= __dirname
+ `
/uploadFiles
/${
Date.now()}`;
-
/
/ 创建目录
-
fs.mkdirSync(newDir);
-
/
/ 创建可写流，用以写入文件
-
let writeStream
= fs.createWriteStream(newDir
+ `
/${filename}`);
-
let fsList
= [];
-
/
/ 取出所有切片文件，放入数组
-
for (let i
=
0; i
< total; i
+
+) {
-
const fsUrl
=
-
dirPath
+
-
"/"
+
-
filename.split(
".")[
0]
+
-
`_${i
+
1}.`
+
-
filename.split(
".")[
1];
-
fsList.push(fsUrl);
-
}
-
/
/ 循环切片文件数组，进行stream流的写入
-
for (let item
of fsList) {
-
handleStream(item, writeStream);
-
}
-
/
/ 全部写入，关闭stream写入流
-
writeStream.
end();
-
}
-
},
100);
-
} catch (e) {
-
console.log(e);
-
}
-
res.
send({
-
code:
0,
-
msg:
"上传成功",
-
size:
index,
-
});
-
});
-
};
-
-
/
/ 获取文件切片数
-
module.exports.getSize
= (req, res)
=
> {
-
let
count
=
0;
-
req.setEncoding(
"utf8");
-
req.
on(
"data",
function (
data) {
-
let name
= JSON.parse(
data);
-
let dirPath
= path.join(__dirname,
"video");
-
/
/ 计算已上传的切片文件个数
-
let files
= fs.readdirSync(dirPath);
-
files.forEach((item,
index)
=
> {
-
let url
=
-
name.fileName.split(
".")[
0]
+
-
`_${
index
+
1}.`
+
-
name.fileName.split(
".")[
1];
-
if (files.includes(url)) {
-
+
+
count;
-
}
-
});
-
res.
send({
-
code:
0,
-
msg:
"请继续上传",
-
count,
-
});
-
});
-
};
逻辑分析
-
前端
-
首先请求上传查询文件是否第一次上传，或已存在对应的切片
- 文件第一次上传，则切片从0开始
- 文件已存在对应的切片，则从切片数开始请求上传
-
循环切片数组，对每块切片文件进行上传
- 其中使用了模拟手动暂停请求，当切片数大于90取消请求
-
-
服务端
-
接收查询文件filename，查找临时存储的文件地址，判断是否存在对应上传文件
- 从未上传过此文件，则返回0，切片数从0开始
- 已上传过文件，则返回对应切片数
-
接收上传文件切片，文件存入临时存储目录
- 通过count和total判断切片是否上传完毕
- 上传完毕，创建文件保存目录，并创建可写流，进行写入操作
- 提取对应临时文件放入数组，循环文件目录数组，依次读取并写入文件buffer
- 写入完毕，关闭可写流。
-
小结
以上代码涉及到具体的业务流程会有所更改或偏差，这只是其中一种具体实现的方式。
希望这篇文章能对大家有所帮助，如果有写的不对的地方也希望指点一二。
转载：https://blog.csdn.net/qq_38334677/article/details/129220108
查看评论