前述

本人node初学者，此前使用原生node实现文件上传时遇到了一些困难，只做到了.txt 和.png两中格式的文件可以正常上传，如果上传其他格式文件服务端保存的文件会无法正常打开，原因是对form表单传来的数据处理不彻底。后来查找许多资料了解到了formidable这个第三方模块,可通过以下指令安装：

npm i formidable

官方对它的描述：

A Node.js module for parsing form data, especially file uploads.

一个专门用来处理表单数据尤其是文件上传的Node.js模块。

实现过程

  1. 首先新建一个html文件作为前端，由于这里只讲功能所有没有添加任何样式。
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>上传文件</title>

</head>

<body>

  <form action="/upload" method="POST" enctype="multipart/form-data">

    <input type="file"  name="up_file" id="upload">

    <input type="submit" id="submit" name="submit">

  </form>

</body>

</html>

这里需要把form的enctype设置为multipart/form-data。

MND对此的描述：

multipart/form-data：当表单包含 type=file 的 <input> 元素时使用此值。

  1. 新建main.js，用node的http模块开启http服务。
const http = require("http");

const fs = require("fs");

const formidable = require("formidable");

let server = http.createServer((req,res)=>{

  if(req.url = "/upload"){

    switch(req.method){

      case "GET":

        //使用流来加载upload.html

        fs.createReadStream("./upload.html").pipe(res);

        break;

      case "POST":

        dealUpload(req,res);

        break;

        default:

          console.log("other method...");

          break;

    }

  }else{

    res.writeHead(302,{"Location": "upload"});

    res.end();

  }

})

//监听8080端口

server.listen(8080);

console.log("listening on 8080, http://127.0.0.1:8080");
  1. 使用formidable处理表单数据，并对生成的新文件重命名。
function dealUpload(req,res){

  var form = formidable.IncomingForm();

  //保持原有扩展名

  form.keepExtensions = true;

  //设置上传目录

  form.uploadDir = __dirname + "/files/";

  form.parse(req,function(err,fields,files){

    if(err) throw err;

    console.log(fields);

    let oldFilename = files.up_file.name;

    //重命名上传的文件

    fs.rename(files.up_file.path, form.uploadDir + generateFilename(oldFilename),err=>{

      if(err) {

        console.log("重命名失败");

        console.log(err);

      }else{

        console.log("重命名成功!");

      }

    })

    res.writeHead(200,{"Content-type":"text/html;charset='utf-8'"});

    res.write('<meta charset="UTF-8" />');

    res.end("<h1>上传结束</h1>");

  })

}

function generateFilename(oldFilename){

  //将老的文件名拼上时间戳，这样既不会命名冲突又可以看出文件的上传事件

  let d = new Date();

  let names = oldFilename.split(".");

  return `${names[0]}_${""+d.getFullYear() + (d.getMonth()+1) + d.getDate() +'_'+ d.getHours() + d.getMinutes() + d.getSeconds()}.${names[1]}`;

}

运行效果

使用node main.js指令将程序运行起来，然后在浏览器输入http://127.0.0.1:8080可以看到：



选择一个文件后点击提交：

然后即可在之前设置保存目录下看到已保存且重命名的文件：

如有错误欢迎指正

NodeJS+formidable实现文件上传加自动重命名的更多相关文章

  1. nodejs+express-实现文件上传下载管理的网站

    Nodejs+Express-实现文件上传下载管理的网站 项目Github地址(对你有帮助记得给星哟):https://github.com/qcer/updo 后端:基于nodejs的express ...

  2. nodejs学习之文件上传

    最近要做个图片上传的需求,因为服务端春节请假回家还没来,所以就我自己先折腾了一下,大概做出来个效果,后台就用了nodejs,刚开始做的时候想网上找一下资料,发现大部分资料都是用node-formida ...

  3. nodejs --- formidable模块 , post 上传.

    1. 只有一个文件域: var formidable = require('formidable'), http = require('http'), util = require('util'); ...

  4. javascript结合nodejs实现多文件上传

    前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口. 因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过no ...

  5. NodeJs koa2实现文件上传

    [转载自:]https://www.jianshu.com/p/34d0e1a5ac70 知识讲解 koa2框架是一个基于中间件的框架,也就是说,需要使用到的功能,比如路由(koa-router),日 ...

  6. jquery 实现拖动文件上传加进度条

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" &g ...

  7. nodejs+multer+ajax文件上传

    前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...

  8. NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实 ...

  9. layui 文件上传加进度条

    1.页面 <div class="layui-row layui-col-space5"> <div class="layui-form-item&qu ...

随机推荐

  1. ArrayList扩容机制

    一.先从 ArrayList 的构造函数说起 ArrayList有三种方式来初始化,构造方法源码如下: 1 /** 2 * 默认初始容量大小 3 */ 4 private static final i ...

  2. yum安装报睡眠错误的解决方法

    可能是系统自动升级正在运行,yum在锁定状态中.可以通过强制关掉yum进程:#rm -f /var/run/yum.pid然后就可以使用yum了.

  3. fork（）系统调用后，对于open（）前后父子进程的访问

    一开始我也不是很懂,后来看了一篇别人的博客觉得写得特别好,现在拷贝下来分享一下. 如果换成write函数 如果换成write函数,先open()后fork(),那么父子进程共享文件描述符,即使在子进程 ...

  4. RocketMQ4.x安装部署

    1.下载安装包:https://www.apache.org/dyn/closer.cgi?path=rocketmq/4.2.0/rocketmq-all-4.2.0-bin-release.zip ...

  5. ip_rcv 中使用skb_share_check

    /* * Main IP Receive routine. */ int ip_rcv(struct sk_buff *skb, struct net_device *dev, struct pack ...

  6. shell编程之trap命令

    trap command  signal trap捕获信号(软中断),command一般是linux命令 若为' '表示发生陷阱时为空指令,'-'表示发生陷阱时采用缺省指令 signal: HUP(1 ...

  7. BlockingQueue中 take、offer、put、add的一些比较

    (转自:https://blog.csdn.net/wei_ya_wen/article/details/19344939 侵删) 在java多线程操作中, BlockingQueue<E> ...

  8. git-关联远程git仓库详细步骤-2

    1.打开git bash,在控制台中输入以下命令:ssh-keygen -t rsa -C "邮箱地址" 结果: fanxi@AT8350 MINGW64 ~$ ssh-keyge ...

  9. 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏（上）

    总是做各种Demo,是时候做个什么小应用来练练手了.踌躇了很久,果然还是搞个小游戏才有意思.想到几年前风靡全球的FlappyBird,一个屏幕一个按钮就足够了,正好适合.OLED屏幕.按键的驱动已经有 ...

  10. 攻防世界-Web_php_include （四种解法）

    攻防世界-Web_php_include   (考察的是文件包含) 打开页面是这样一段代码从代码中得知page中带有php://的都会被替换成空 str_replace()以其他字符替换字符串中的一些 ...