在本教程中，我们将使用javaScript使用node.js上传文件，这很常见。例如，您可能需要上传以各种格式的化身，缩略图，PDF文件或任何其他图像或文件。
我们将在几个部分中构建本教程。首先，我们将创建项目，然后我们将创建前端代码，最后是服务器的后端代码。
要了解本教程，您将需要对命令行的一些基本知识。如果您以前从未使用过命令行，请参见以下命令行教程，该教程为最常用的操作系统说明了一些基本命令。您还需要同时安装node.js和NPM软件包管理器。
创建项目
我们要做的第一件事是配置和创建项目。为此，请在某处创建一个空目录，通过命令行访问它，然后使用以下命令创建项目：
我们只需要安装两个软件包。首先使用以下命令安装Express：
npm安装express
接下来，我们还需要一个名为Express-fileupload的中间件，我们可以用来管理发送到服务器的文件：
npm安装express-fileupload
接下来，配置将创建Express Server的文件。为此，请编辑package.json文件，该文件应包含脚本部分中的“ start”：“ node index.js”行，以告诉Node我们启动应用程序时要运行的文件：
{
“名称”：“ ulpload-file-ajax”，
“描述”：“创建Ajax媒介文件的教程”，
“版本”：“ 1.0.0”，
“依赖项”：{
“ express”：“ 4.16.2”，
“ express-fileupload”：“^1.1.7-alpha.3”，
“请求”：“^2.88.2”
}，
“脚本”：{
“开始”：“节点index.js”
}
}
接下来，我们在项目的根文件夹中创建index.js文件，并为创建基本服务器添加了必要的代码：
const express = require（'express'）;
const router = express.router（）;const bodyparser = require（'Body-parser'）;
const fileupload = require（'express-fileupload'）;
const filecontroller = require（'./ controllers/filecontroller'）;const app = express（）;
const filecontroller = new filecontroller（）;app.use（bodyparser.json（））;
app.use（bodyparser.urlencoded（{extended：true}））;
app.use（fileupload（））;router.post（'/ulpload-file'，filecontroller.uploadfile）;
router.use（function（req，res）{
res.status（404）.json（{
错误：是的，
消息：'找不到'
}）;
}）;app.use（'/api'，路由器）;
app.use（express.static（__ dirname））;
app.get（'/'，function（req，res）{
res.render（'index.html'）;
}）;var port = 3000;
app.listen（port，function（）{
console.log（'server'，process.pid，'在端口上侦听'，端口）;
}）;module.exports = app;
我们所做的就是创建服务器。在文件的顶部，我们需要对express-fileupload模块进行要求，这对于上传文件至关重要。
我们包括位于/controllers/FileController.js文件中的FileController类，尽管我们还没有创建它。在此控制器的uploadFile函数中，我们将添加上传文件的代码。
至于将请求将请求重定向到控制器的路径，我们使用以下函数定义了/api/upload-file的路径：
router.post（'/upload-file'，filecontroller.uploadfile）;
我们使用以下语句向路径添加了/api前缀：
app.use（'/api'，路由器）;
请查看此文件，因为我们将下一步创建前端代码。
2.前端JavaScript代码
在本节中，我们将添加负责将文件从用户系统发送到服务器的前端代码。首先，在项目的根文件夹中创建index.html文件。接下来，编辑您刚创建的文件并复制并粘贴以下代码，我们将在稍后解释：
<！doctype html>
ajax节点文件上传教程
ajax节点文件上传教程
我们所做的是添加基本的HTML5模板。我们还添加了HTML input字段，该字段是用户将与之进行交互以上传文件的字段：
< /pre>您可以看到，我们已经链接到关闭
</body>标签之前的/resources/js/scripts.js脚本。让我们添加它，因此首先创建/resources/js目录，然后创建和编辑scripts.js文件。现在，我们将添加JavaScript代码，该代码将使我们可以将事件与为将文件上传到服务器所创建的字段。首先，我们将看到代码，然后将其解释：
const uploadimage = event => {
const files = event.target.files;
const data = new formdata（）;
data.append（'file'，files [0]）;
fetch（'/api/upload-file'，{
方法：'post'，
身体：数据
}）
。 。然后（data => {
document.getElementById（'result'）。innerhtml ='the file' + data.path +'已成功上传。';
}）
.catch（error => {
Console.Error（错误）;
}）;
}
document.queryselector（'＃upload_file'）。addeventlistener（'change'，event => {
uploadimage（event）;
}）;
在代码的最后一个块中，我们已经为输入注册了一个
change事件，用于上传文件。在此事件中，我们执行函数uploadImage，该函数以参数为单击事件本身，从那里我们可以访问所选文件。我们在
uploadImage函数中所做的是获取位于event.target.files数组中的所选文件。然后，我们创建一个FormData对象并将所选文件分配给它。最后，我们使用获取函数将POST请求发送到我们在服务器上创建的/api/upload-file路径。然后，我们检查文件上传是否已成功完成，如果正确上载了文件路径，则在
result字段中打印该文件，或者否则在控制台中显示错误。我们返回path属性中的路径。3. node.js后端代码
现在，让我们看一下服务器上遵循的过程以上传文件。您需要做的第一件事是在项目的根文件夹中创建
/uploads目录。这是我们将上传文件的目录。我们将创建
/controllers/FileController.js文件作为控制器。和以前一样，我们将首先查看此文件的代码，然后解释其工作原理：类filecontroller
{
uploadfile = async（req，res，next）=>
{
const file = req.files.file;
const filename = file.name;
const路径= __dirname +'/../uploads/' + filename;尝试{
file.mv（路径，（错误）=> {
如果（错误）{
Console.Error（错误）;
res.writehead（500，{
'content-type'：'application/json'
}）;
res.end（json.stringify（{状态：'错误'，消息：错误}））;
返回;
}
return res.status（200）。 }）;
}捕获（e）{
res.status（500）.json（{
错误：是的，
消息：e.tostring（）
}）;
}
}
}module.exports = filecontroller;
我们创建了一个名为
FileController作为控制器的类，在其中定义了uploadFile函数。我们要做的第一件事是获取已发送的文件，该文件应该位于变量
req.files.file中，因为file是我们在前端代码中给出的名称。现在我们可以获取文件的名称，该文件将在变量file.name中。接下来，我们定义了要复制文件的
path，然后使用函数file.mv，将文件复制到该路径。如果文件已成功复制，我们将以JSON格式发送回响应：
返回res.status（200）.send（{status：'success'，路径：'/uploads/' + fileName}）;
否则，返回错误。
4.测试应用程序
让我们测试应用程序以验证一切正常工作。为此，打开一个终端窗口，然后转到项目的根文件夹。然后运行以下命令以启动服务器：
npm开始
然后转到URLhttp://localhost:3000/并尝试上传文件，例如.png或.jpg格式的图像。就是全部。