前述

本人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. 硬核卸载Vue（删除）

    第一步 查找vue位置 打开 cmd 输入 where vue 第二步 进入文件 直接cv(复制粘贴) 随便打开个文件 第三步 删除vue 删除前缀vue的所有 进入node_modules 删除@v ...

  2. uniapp微信小程序canvas隐藏

    HTML 我是把canvas嵌套在view里并被view设置id <view id="canvas"> <canvas style="width: 35 ...

  3. MySQL全面瓦解6：查询的基本操作

    概述 提到查询,就回到我们第四篇的SQL语言分类了,DQL(Data QueryLanguage),也就是数据查询语言,实际就是从数据库中获取数据的一种命令方式.我们给数据库发送一个查询语句的命令,数 ...

  4. sublime中插件

    AllAutocomplete Emmet

  5. VirtualBox上桥接方式安装CentOS之后借助宿主上网

    VirtualBox上桥接方式安装CentOS之后借助宿主上网: 修改centos文件: 1 vi  /etc/sysconfig/network-scripts/ifcfg-eth0 增加以下几项: ...

  6. C++ 中表达式求值

    首先我们来看一段代码: int a() { return std::puts("a"); } int b() { return std::puts("b"); ...

  7. JAVA SE——集合框架

    1.首先根据业务场景选择哪种集合类型. set(无序,并且不包含重复元素),list(有序,并且允许重复元素),map(key-value,)

  8. web开发的本质

    1.浏览器上输入一个网址回车后都发生了什么? (1)浏览器相当于一个客户端,将域名翻译成ip,浏览器给服务端发送一个消息. (2)服务端拿到消息 (3)服务端返回消息 (4)浏览器展示页面 2.客户端 ...

  9. IDEA常用插件汇总

    actiBPM idea的Activiti插件,不知道Activiti的可以百度下,用到了再来安装这个插件. Alibaba Java Coding Guidelines Alibaba开发的Java ...

  10. python-验证码图片识别

    import tesserocr from PIL import Image #新建Image对象 image = Image.open('code.png') #调用tesserocr的image_ ...