node.js文件上传处理示例

下面我会详细讲解一下 "node.js 文件上传处理示例" 的完整攻略。这个示例是用来演示如何使用 node.js 处理文件上传的场景。

前置知识

在学习这个示例之前，需要掌握以下知识：

基本的 node.js 知识
HTTP 协议
基本的 JavaScript 知识
了解文件上传的相关概念

实现方法

使用 node.js 实现文件上传主要使用了以下两个模块:

fs 模块: 用于文件的读取、写入和删除
formidable 模块: 用于处理表单数据和文件上传

使用步骤如下：

步骤一：安装模块

首先，我们需要将 formidable 模块安装到项目中。可以通过 npm install 命令进行安装，如下所示：

npm install formidable --save

步骤二：引入模块

然后，在程序中引入模块，如下所示：

const formidable = require('formidable');
const fs = require('fs');

步骤三：处理上传请求

接着，我们需要动手写上传请求的处理程序。一般来说，上传请求是以 POST 方式提交的。处理上传的过程大致如下：

创建一个 formidable 实例
执行 parse 方法，分析上传 POST 请求中的文件
取出文件，并将其存储到指定的文件夹中

代码示例如下：

http.createServer(function (req, res) {

  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // 创建上传文件解析器
    const form = new formidable.IncomingForm();
    // 指定上传文件保存的目录
    form.uploadDir = './uploads';

    form.parse(req, function (err, fields, files) {
      // 取出上传的文件信息
      const file = files.file;
      // 给文件名添加时间戳避免重复
      const tmpPath = file.path;
      const newPath = form.uploadDir + '/' + file.name + new Date().getTime();
      // 移动文件到指定文件夹中
      fs.rename(tmpPath, newPath, function (err) {
        if (err) throw err;
        res.writeHead(200, { 'content-type': 'text/plain' });
        res.write('received upload:\n\n');
        res.end(util.inspect({ fields: fields, files: files }));
      });
    });
    return;
  }

  // 其他请求返回404
  res.writeHead(404, { 'content-type': 'text/html' });
  res.end('<h1>404 Not Found</h1>');

}).listen(8080);

步骤四：上传文件

最后一步，我们可以上传一个文件，如下所示：

<html>

<body>
  <form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="file"><br><br>
    <input type="submit" value="上传">
  </form>
</body>

</html>

上传文件时，需要注意表单的 enctype 属性必须设置成 "multipart/form-data"。

示例说明

以下是两个示例说明。

示例一：上传文件并显示文件

const http = require('http');
const fs = require('fs');
const path = require('path');
const formidable = require('formidable');

http.createServer(function (req, res) {
  if (req.method.toLowerCase() == 'get') {
    // 显示一个文件上传的表单页面
    const html = `
      <html>
        <head>
          <meta charset="utf-8">
        </head>
        <body>
          <form action="/" enctype="multipart/form-data" method="post">
            <label>上传文件</label>
            <input type="file" name="file" multiple="multiple"><br><br>
            <input type="submit" value="上传">
          </form>
        </body>
      </html>` ;
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
    res.end(html);
    return;
  }

  // 处理文件上传
  if (req.url == '/' && req.method.toLowerCase() == 'post') {
    const form = new formidable.IncomingForm();
    form.uploadDir = './';
    form.parse(req, function(err, fields, files) {
      const filename = files.file.name;
      const fullpath = path.join(form.uploadDir, filename);
      console.log(fullpath);
      fs.renameSync(files.file.path, fullpath);
      // 显示上传的文件
      res.writeHead(200, {'Content-Type': 'text/html'});
      const image = `<img src="/${filename}" alt=""/>`;
      res.end(image);
    });
    return ;
  }

}).listen(8080);

示例二：上传文件并返回文件名

const http = require('http');
const fs = require('fs');
const formidable = require("formidable");

const server = http.createServer(function(req, res) {
  if (req.url == '/fileupload') {
    const form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      const oldpath = files.filetoupload.path;
      const newpath = './' + files.filetoupload.name;
      fs.rename(oldpath, newpath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        res.write('\n');
        res.write(files.filetoupload.name);
        res.end();
      });
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
});
server.listen(8080);

结语

以上是一个完整的 node.js 文件上传处理示例的攻略，包含了示例代码和部分示例说明。希望能够帮助到大家。如果还有不清楚的地方，欢迎在评论区留言。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js文件上传处理示例 - Python技术站