21xrx.com
2024-12-23 00:34:12 Monday
登录
文章检索 我的文章 写文章
Node.js上传文件的POST请求
2023-07-04 21:41:10 深夜i     --     --
Node js 上传文件 POST请求 multipart/form-data formidable

Node.js是一个跨平台运行的JavaScript运行环境，可以让前端JavaScript语言也能够应用到后端服务器开发中。这个在开源社区中广泛使用的工具也能够方便地上传文件，本文将为大家介绍Node.js中如何使用POST请求上传文件。

上传文件是Web开发中一项非常基础的功能，而Node.js的express框架已经为我们提供了非常方便的文件上传模块，我们只需要简单几步就可以快速地完成文件上传。下面就让我们来详细讨论如何使用POST请求上传文件。

首先，我们需要在Node.js中安装express框架。通过命令行输入以下代码即可安装：`npm install express` 。

接下来，我们需要使用Node.js内置的http模块或引入外部模块（例如`http.createServer()` ）创建一个HTTP服务器，然后使用express框架的中间件express.json()和express.urlencoded()解析请求体（body）里的数据并将其放入req.body 中。



const http = require('http');


const express = require('express');


const bodyParser = require('body-parser');


const app = express();


app.use(bodyParser.urlencoded({ extended: false }));


app.use(bodyParser.json());

之后就可以定义路由，编写上传文件的代码。



app.post('/uploadFile', (req, res) => {


 let file = req.body.file;


 // 文件存放目录


 let fileDir = './uploads';


 // 以当前日期命名新文件


 let newFileName = `${new Date().toISOString().replace(/[.:\s]/g, '')}${file.name}`;


 // 拼接文件上传路径和新文件名


 let filePath = `${fileDir}/${newFileName}`;


 // 使用fs模块的createWriteStream方法写入文件


 let stream = fs.createWriteStream(filePath);


 stream.write(file.data);


 stream.end();


 res.send('File upload successful!');


});

以上代码的主要流程是从HTTP请求中获取上传文件，然后将文件的数据以流的形式写入到指定的文件路径。在上述代码中，我们使用了Node.js内置的fs模块将文件写入磁盘。当然，可以使用其他的方式，例如mongoose等框架来存储文件。

最后，我们需要将应用程序监听固定的端口，以便外部客户端可以访问该应用程序。



const server = http.createServer(app);


server.listen(3000, () => console.log('Server start!'));

通过以上代码，我们就可以使用POST请求上传文件了。用户需要在表单中选择要上传的文件，并使用XHR发送POST请求附带文件数据。在发起请求时需要将请求头中的Content-Type设置为multipart/form-data，具体可以通过FormData对象来实现。

 javascript

let fileInput = document.querySelector('input[type="file"]');


fileInput.addEventListener('change', () => {


 let file = fileInput.files[0];


 let formData = new FormData();


 formData.append('file', file);


 


 // 向服务器发起POST请求


 fetch('/uploadFile', {


  method: 'POST',


  headers:


   'Content-Type': 'multipart/form-data'


  ,


  body: formData


 });


});

以上代码可以监听表单输入框的文件选择，并通过fetch函数发起POST请求。需要注意的是，在这个例子中我们手动设置了请求头中的Content-Type为multipart/form-data，这是因为FormData对象在发送请求时会自动设置Content-Type。

总之，Node.js提供了非常丰富的工具和框架，可以很方便地实现文件上传功能。使用POST请求上传文件的步骤虽然看上去比较繁琐，但是只要掌握了相关知识，就可以非常快速地实现一个稳定、高效的文件上传功能。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复