如何使用Node.js上传文件并显示进度条

文件上传 在NodeJS中意味着将文件从客户端位置移动到服务器位置。进度条是一种可视化组件，根据文件上传的总进度进行更改和更新。在这里，我们将建立一个本地服务器，并根据上传的进度增加进度条的长度来上传文件到目标文件夹中。

Formidable模块: 这是一个用于解析表单数据的Node.js模块，主要用于文件上传。

安装: 进入项目目录并运行以下命令:

npm install formidable

创建服务器的步骤：

第1步： 首先创建一个名为”index.html”的文件，该文件将作为客户端的前端。以下是一个示例代码。我们创建了一个名为progressUpload的空组件，该组件只在选择要上传的文件后才会更新。

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" src="index.css"> 
    <title>Node.js Upload Files with Progress Bar</title> 
</head> 
  
<body> 
    <h1>Check The Progress of Uploaded Files</h1>    
     
    <div> 
        <span>Select files to upload</span> 
        <input type="button" class="chooseFiles" value="Select..." /> 
        <div class="progressUpload"></div> 
    </div> 
    <script src="uploader.js"></script> 
</body> 
  
</html>

第2步： 创建一个‘uploader.js’文件，它将打开一个弹窗以上传文件并显示进度条。以下是JS代码。

首先，我们创建一个用于选择文件的输入元素，并使用addEventListener函数将其附加到前端的浏览按钮上。当选择新文件时，会使用FormData()格式发送文件详情。

为了更新进度条，我们为其添加事件监听器，并以百分比更新其值。通过在createProgressbar( )函数中创建两个div组件，将进度条添加到‘index.html’中。

JavaScript

var browse = document.getElementsByClassName('chooseFiles')[0]; 
var selectDialog = document.createElement("INPUT"); 
selectDialog.setAttribute("type", "file"); 
selectDialog.setAttribute("multiple", "true"); 
selectDialog.style.display = "none"; 
var progressUpload = document.getElementsByClassName("progressUpload")[0]; 
var progress; 
addProgressBar(); 
browse.addEventListener("click", function(){     
    selectDialog.click(); 
      
}); 
  
selectDialog.addEventListener("change", function(){ 
      
    sendFiles(selectDialog.files); 
  
}); 
  
function sendFiles(files){ 
      
    resetProgressBar(); 
    var req = new XMLHttpRequest();        
    req.upload.addEventListener("progress", updateProgress); 
    req.open("POST", "/uploadFile"); 
    var form = new FormData(); 
    for(var file = 0; file < files.length; file++){          
          
        form.append("file" + file, files[file], files[file].name); 
          
    }  
    req.send(form);   
} 
function updateProgress(e){    
      
    progress.style.width = (((e.loaded/e.total)*100))+ "%"; 
  
} 
function resetProgressBar(){ 
    progress.style.width = "0%"; 
} 
function addProgressBar(){ 
    var progressBar = document.createElement("div"); 
    progressBar.className = "progressBar"; 
    progressUpload.appendChild(progressBar); 
    var innerDIV = document.createElement("div"); 
    innerDIV.className = "progress"; 
    progressBar.appendChild(innerDIV); 
    progress = document.getElementsByClassName("progress")[0]; 
}

第3步:

现在创建主服务器文件’server.js’，它将上传文件到目标位置并将网页所请求的资源发送到客户端。我们有四种不同的URL请求类型，分别是HTML、CSS、JS和上传。使用Nodejs文件系统模块’fs’将文件移动到新位置。

注意:

在’var upd’中添加你的机器目标地址。

Javascript

var http = require("http"); 
var url = require("url"); 
var fs = require("fs"); 
var formidable = require("formidable"); 
var host = "localhost"; 
var port = 7777; 
  
http.createServer(function (req, res) { 
    var path = url.parse(req.url, true); 
    if(path.pathname.endsWith("html")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", { "Content-Type": "text/html"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("css")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", {"Content-Type": "text/css"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("js")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", { "Content-Type": "text/javascript"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("uploadFile")){ 
        var form = new formidable.IncomingForm(); 
          
        form.parse(req, function(err, fields, files){ 
              
            for(var file in files){ 
                if(!files.hasOwnProperty(file)) continue; 
                var old = files[file].filepath; 
                var upd = 'C:/Users/sunny/' + files[file].name; 
                fs.rename(old, upd, function (error) { 
                    if (error) throw error; 
                }); 
            } 
            res.write('File uploaded Successfully'); 
            res.end(); 
        }); 
    } 
}).listen(port, host);

第4步： 最后创建一个样式表‘index.css’来格式化进度条的显示。

CSS

.progressupload{ 
    height: 20px; 
    margin-top: 25px; 
} 
.progress{ 
    background-color: green; 
    width: 0%; 
    height: 20px; 
     
} 
.progressBar{ 
    padding-top: 2px; 
    padding-bottom: 2px; 
}

第5步： 通过安装npm来更新NodeJS模块，并通过运行以下命令来运行项目：