nodejs基础教程 Node.js的安装方法

编程之家2026-07-031099次浏览

大家好，今天小编来为大家解答nodejs基础教程这个问题，Node.js的安装方法很多人还不知道，现在让我们一起来看看吧！

NodeJs全栈创建多文件断点续传

文章涉及的源代码在GitHub上，查看源代码。

项目安装这是一个Node项目，可以使用常规的方式进行设置，如果已经有一个项目，则可以继续执行该项目，完全没有问题。如果是全新开始，请执行以下操作：

下载并安装Node，它会全局上安装npm；

安装Yeoman，npminstall-gyo，并全局安装脚手架npminstall-ggenerator-norm；

创建项目文件所在的文件夹；

打开终端并使用cd命令导航到项目目录，例如cdmultifile-uploader；

运行命令npminit-y初始化npm项目，生成简单的package.json；

运行命令yonorm初始化项目基础依赖；

使用npminstallexpress--save命令安装express模块。

运行yarnstart，即可打开预览

工作原理现在来了解这个系统是如何工作的，此应用程序有2个流程需要服务器和客户端之间的严格协调。

上传流程：获取新文件，发送有关文件信息到服务器，服务器返回一个密钥（id），在发送文件块时需要使用该密钥（id），允许它跟踪文件并能够在以后发生中断时恢复它上传。

恢复上传流程：向服务器查询提供的名称和密钥（id）的文件的状态，以便服务器可以响应上传停止的块大小，以便上传可以从该点继续。

还有第四个端点，用于获取所有待处理的文件密钥以恢复上传，以防上传停止并且想在几天后恢复。对于本教程，一旦上传并获取ID，会将其保留在客户端以恢复它们，但是如果关闭浏览器选项卡，ID将丢失，并且将无法恢复。

客户端这里的客户端主要是WEB应用端。这个项目的HTML非常简单，修改文件app/index.html，下面是核心的代码。

<divclass="rowmarketing"><divclass="col-lg-12"><labelclass="upload-btn">上传文件<inputtype="file"multipleaccept="video/*"id="file-upload-input"style="display:none"/></label></div></div>这里的重要细节是input属性必须具有multiple属性以允许用户选择多个文件，还可以选择使用accept属性标识允许上传的文件类型。

对于上传文件，通过input的id属性获取元素对象，并为其绑定事件change来监听用户文件的选择。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});下面代码定义了uploadFiles方法：

upload：传输文件块

upload-status：查询文件上传状态，如果开始上传和停止或有什么东西中断了，迫使选择一个文件再次上传，这将返回关于文件停止的位置、在中断之前上传了多少块的信息。

upload-request：通知服务器要上传的内容，以便服务器设置密钥并在上传开始时跟踪文件。

选项对上传的各个阶段或状态进行回调（中止、进度、错误和完成），起始字节是从要发起上传的文件流的哪个位置开始，文件id是标识文件的一种方法。

文件上传UI/UX处理在服务器上设置上传端点之前，最好在客户机上处理它，因为这将帮助服务器端更有意义。

对于这一部分，需要一些处理UI的东西。这部分可以很容易地用任何UI库或框架来完成，比如Vue和Angular。

类似于uploadFiles函数，需要与uploadFiles交互并更新UI的uploadAndTrackFiles。uploadAndTrackFiles是一个函数，它获取一个文件列表并调用uploadFiles，然后通过将页面体上的每个文件元素进度指示器附加到progressBox容器中来设置视图。

在内部，它还有所有的回调函数来跟踪和响应每个文件状态。

constuploadAndTrackFiles=(()=>{constprogressBox=document.createElement("div");letuploader=null;constsetFileElement=(file)=>{//createfileelementhere};constonProgress=(e,file)=>{};constonError=(e,file)=>{};constonAbort=(e,file)=>{};constonComplete=(e,file)=>{};return(uploadedFiles)=>{[...uploadedFiles].forEach(setFileElement);document.body.appendChild(progressBox);uploader=uploadFiles(uploadedFiles,{onProgress,onError,onAbort,onComplete,});};})();从change事件侦听器中调用uploadAndTrackFiles传递文件列表。

elemFileInput.addEventListener("change",(e)=>{uploadAndTrackFiles(e.currentTarget.files);e.currentTarget.value="";});现在要做的一件事是清除之后的input的值，这样浏览器就就不会阻止用户添加更多的文件。到目前为止，可以回到uploadFiles函数中处理上传。

文件上传逻辑回到uploadFiles函数，循环遍历文件列表，并调用处理请求初始化的uploadFile。发起请求后，将返回一个对象，返回的对象为公开函数，当使用文件调用该函数集。

uploadFile函数只是让服务器知道它应该期待一个文件很快被上传，并提供文件名。

constuploadFiles=(()=>{constURL=``;constENDPOINTS={UPLOAD:`${URL}upload`,UPLOAD_STATUS:`${URL}/upload-status`,UPLOAD_REQUEST:`${URL}/upload-request`,};constdefaultOptions={url:ENDPOINTS.UPLOAD,startingByte:0,fileId:"",onAbort(){},onProgress(){},onError(){},onComplete(){},};constfileRequests=newWeakMap();constuploadFile=(file,options)=>{};constabortFileUpload=(file)=>{};constretryFileUpload=(file)=>{};constclearFileUpload=(file)=>{};constresumeFileUpload=(file)=>{};constuploadFileChunks=(file,options)=>{};constuploadFile=(file,options)=>{returnfetch(ENDPOINTS.UPLOAD_REQUEST,{method:"POST",headers:{"Content-Type":"application/json",},body:JSON.stringify({fileName:file.name,}),}).then((res)=>res.json()).then((res)=>{options={...options,...res};fileRequests.set(file,{request:null,options});uploadFileChunks(file,options);}).catch((e)=>{options.onError({...e,file});});};return(files,options=defaultOptions)=>{[...files].forEach((file)=>{uploadFile(file,{...defaultOptions,...options});});return{abortFileUpload,retryFileUpload,clearFileUpload,resumeFileUpload,};};})();一旦服务器用文件id进行响应，它就会更新函数，并使用请求选项创建一个文件请求空记录，以备后续重试。一旦这些都设置好了，它就会调用带有文件和更新选项的uploadFileChunks，这些选项将实际处理上传。

在这里，首先初始化表单数据和请求，然后从起始字节点开始对文件进行切片。

文件是一个Blob类型，它让用TypedArray来切片文件字节，这就是如何跟踪从哪一点开始上传文件服务器会负责把文件一块一块地放在一起。

constuploadFileChunks=(file,options)=>{constformData=newFormData();constreq=newXMLHttpRequest();constchunk=file.slice(options.startingByte);formData.append("chunk",chunk,file.name);formData.append("fileId",options.fileId);req.open("POST",options.url,true);req.setRequestHeader("Content-Range",`bytes=${options.startingByte}-${options.startingByte+chunk.size}/${file.size}`);req.setRequestHeader("X-File-Id",options.fileId);req.onload=(e)=>{//当请求状态不是200时被调用//这将只把200视为成功，其他的都是失败if(req.status===200){options.onComplete(e,file);}else{options.onError(e,file);}};req.upload.onprogress=(e)=>{constloaded=options.startingByte+e.loaded;options.onProgress({...e,loaded,total:file.size,percentage:(loaded*100)/file.size,},file);};req.ontimeout=(e)=>options.onError(e,file);req.onabort=(e)=>options.onAbort(e,file);req.onerror=(e)=>options.onError(e,file);fileRequests.get(file).request=req;req.send(formData);};然后，通过提供块的名称（即文件名）和文件id与服务器通信，并通过在将要发送的表单数据中设置这些属性。

当使用XMLHttpRequest时，需要打开一个请求，在这里发起一个POST请求，设置一些头信息。

Content-Range：这是与服务器通信的方式发送的文件字节的范围。该信息对服务器很重要，以便知道如何将文件放回一起并验证请求。

X-File-Id：传递文件id的另一种方式。

一旦设置好请求，就用传递事件和文件Blob的选项回调来映射上传进度事件。

一旦上传完成，就会触发load事件。

当请求接收到更多数据时，就会触发progress事件，从那里可以提取到目前为止上传的总字节数，并计算上传进度百分比。

timeout和error将被视为失败;

当触发中止以暂停上传时，中止将被触发。

接下来要做的就是使用WeakMap中的实际请求更新文件请求并发送表单数据。

文件恢复上传逻辑恢复上传的逻辑要简单得多，这里，所要做的就是使用提供的文件从WeakMap中获取文件请求，并将文件id和名称作为查询参数传递到服务器上查询该文件的上传状态。

有了状态（之前上传的总字节）后，调用uploadFileChunks函数，提供开始上传的字节。

constresumeFileUpload=(file)=>{constfileReq=fileRequests.get(file);if(fileReq){returnfetch(`${ENDPOINTS.UPLOAD_STATUS}?fileName=${file.name}&fileId=${fileReq.options.fileId}`).then((res)=>res.json()).then((res)=>{uploadFileChunks(file,{...fileReq.options,startingByte:Number(res.totalChunkUploaded),});}).catch((e)=>{fileReq.options.onError({...e,file});});}};文件重试上传逻辑文件上传过程中可能会出错，也许网络失去了连接，服务器崩溃了等等。

其逻辑与恢复上传逻辑几乎相同，唯一的区别是在catch块上，重新启动上传，以防文件从未开始上传，并且服务器不知道它。

constretryFileUpload=(file)=>{constfileReq=fileRequests.get(file);if(fileReq){//trytogetthestatusjustincaseitfailedmiduploadreturnfetch(`${ENDPOINTS.UPLOAD_STATUS}?fileName=${file.name}&fileId=${fileReq.options.fileId}`).then((res)=>res.json()).then((res)=>{//ifuploadedwecontinueuploadFileChunks(file,{...fileReq.options,startingByte:Number(res.totalChunkUploaded),});}).catch(()=>{//ifneveruploadedwestartuploadFileChunks(file,fileReq.options);});}};文件暂停上传逻辑要暂停当前上传的文件，需要中止请求。除了抓取文件上传进度，中止请求的能力是使用XMLHttpRequest的第二个原因。

当使用文件调用这个函数时，从WeakMap中获取请求，并使用请求调用abort函数来停止上传。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});0这将简单地停止向服务器发送块，然后可以通过调用resumeFileUpload函数继续上传。

文件清除逻辑在上传完成时或之后清除或取消上传，它只会中止请求并清除它，执行清除操作后将无法继续恢复上传。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});1上传进度在uploadAndTrackFiles函数，可以定义进度框的内部HTML，它将显示当前有多少文件正在上传，并提供一个上传进度恢复表，告诉有多少文件失败了、成功了、暂停了等等。

还有一个最大化按钮，当点击将展开或折叠上传程序。紧接着，有一个总的文件上传进度条和一个容器，将放置每个文件指示元素和单独的状态和控件。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});2一旦接收到文件Blobs，就可以使用它来创建文件元素，方法是调用setFileElement，它创建一个包含文件名、进度条、百分比以及用于处理文件上传的控制按钮的div。

还需要跟踪各个文件元素，以便稍后可以使用文件Blob引用它们。需要跟踪它的大小、状态、百分比和上传的块大小。所有这些细节将用于呈现元素进度细节并相应地更新视图。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});3一旦使用了这些元素，就获取了它的控制按钮的引用，并附加了从上传器调用公开方法的单击事件，以控制传递文件的内容。

当清除元素时，需要通过调用updateProgressBox函数来更新进度框元素。这是更新所有上传文件的整体细节的函数。比如所有失败、成功、暂停和上传文件。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});4还需要根据文件上传进度事件更新各个文件元素，它只是更新进度条百分比和状态文本消息，并根据文件上传状态切换可见或不可见的按钮。

constelemFileInput=document.getElementById("file-upload-input");elemFileInput.addEventListener("change",(e)=>{//handlefilehere});5现在有了基于上传事件更新元素的函数，需要相应地处理所有文件上传事件。

因此，每当进程事件调用onProgress回调函数时，将使用该文件从setFileElement函数中设置的文件中获取渲染的文件对象，并使用事件细节更新其状态、百分比和块大小，然后调用updateFileElement函数。

constelemFileInput=document.getElementById

nodejs需要多长时间才能入门

Node.js的入门时间通常为1个月左右，具体取决于学习者的JavaScript基础和投入程度。以下是详细分析：

1.基础准备阶段（1周至1个月）

学习Node.js的前提是掌握JavaScript基础语法，包括变量、数组、对象、函数、作用域、原型链等核心概念。若已有前端开发经验，此阶段可能仅需1周；若完全零基础，则需1个月左右通过书籍、教程或视频系统学习。JavaScript的熟练度直接影响后续Node.js的学习效率，例如理解异步编程时需对回调函数、Promise等有清晰认知。

2.环境搭建与核心概念学习（1周）

安装Node.js环境仅需数分钟，但需熟悉其命令行工具（如npm包管理器、REPL交互环境）及基础操作（如运行脚本、调试代码）。随后需集中学习Node.js的五大核心特性：

模块系统：理解require与module.exports的机制，掌握内置模块（如fs、http）和第三方模块的使用方法。

事件驱动模型：通过events模块学习事件发射与监听，例如模拟HTTP请求的响应流程。

异步编程：重点掌握回调函数、Promise、async/await的写法，避免“回调地狱”。

文件与流操作：实践文件读写（fs模块）及数据流（如stream）处理，理解缓冲区和管道的概念。

网络编程：使用http或express框架创建简单服务器，理解请求-响应生命周期。

3.项目实践阶段（1至2周）

通过实际项目巩固知识，例如开发一个静态文件服务器、简易API接口或命令行工具。此阶段需结合文档和开源代码，逐步解决依赖管理、错误处理、性能优化等实际问题。实践是检验学习成果的关键，例如用Express框架搭建RESTful API时，需综合运用路由、中间件、异步处理等知识。

4.时间优化建议

若每天投入2至3小时高效学习，且具备JavaScript基础，2至3周可完成入门；若仅利用碎片时间学习，则可能延长至1至2个月。全身心投入者可通过以下方式加速学习：

参考官方文档和权威教程（如《Node.js设计模式》）；

参与开源项目或复现经典案例（如实时聊天应用）；

使用调试工具（如Chrome DevTools）分析代码执行流程。

总结：Node.js的入门周期较短，但需以JavaScript基础为前提。系统学习核心概念+针对性实践是高效入门的路径，多数学习者可在1个月内掌握基础开发能力。

学习vuejs是需要nodejs的基础吗

应该说学习前段，需要一些nodejs基础。因为现在得前端技术都离不开使用npm安装包来去管理编译流程。npm是nodejs的包管理工具。另外vuejs脚手架等周边的工具也是需要npm包来操作的。所以，做前端，必须要了解nodejs，重点是npm的安装、使用。

如果只用vue.js来做页面，此时vue.js就相当于一个单纯的js文件，直接在官网学教程就行，不会涉及到node.js。但是，如果你要继续深挖vue.js，就得学一下node.js了

关于nodejs基础教程，Node.js的安装方法的介绍到此结束，希望对大家有所帮助。

fread函数和fwrite函数，fread和fwrite的用法计算机二级c语言选择题？c语言二级考试选择题