娱乐视频直播网站建设,北京网站建设推广服务信息,织梦网站模板使用教程,旅游网站建设系统Node.js简介#xff1a;
当谈论Node.js时#xff0c;通常指的是一个基于Chrome V8 JavaScript引擎构建的开源、跨平台的JavaScript运行时环境。以下是一些Node.js的内容#xff1a; 事件驱动编程#xff1a;Node.js采用了事件驱动的编程范式#xff0c;这意味着它可以异步…Node.js简介
当谈论Node.js时通常指的是一个基于Chrome V8 JavaScript引擎构建的开源、跨平台的JavaScript运行时环境。以下是一些Node.js的内容 事件驱动编程Node.js采用了事件驱动的编程范式这意味着它可以异步地执行I/O操作而无需阻塞进程或线程。这种方法可以提高应用程序的性能和响应性。 模块化Node.js支持模块化编程因此开发人员可以将代码分解为可重用的模块。Node.js中的每个文件都被视为一个模块可以使用require()函数将其导入到其他文件中。 NPMNode.js拥有一个名为NPMNode 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 classvideo typefile /
button typesubmit onclickhandleVideo(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 FormData();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;charsetutf-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) {// 读取对应目录文件bufferconst 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;// 获取当前切片indexlet 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写入完毕关闭可写流。
小结
以上代码涉及到具体的业务流程会有所更改或偏差这只是其中一种具体实现的方式。 希望这篇文章能对大家有所帮助如果有写的不对的地方也希望指点一二。
