前述

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

  1. npm i formidable

官方对它的描述：

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

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

实现过程

  1. 首先新建一个html文件作为前端，由于这里只讲功能所有没有添加任何样式。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>上传文件</title>
  7. </head>
  8. <body>
  9.   <form action="/upload" method="POST" enctype="multipart/form-data">
  10.     <input type="file"  name="up_file" id="upload">
  11.     <input type="submit" id="submit" name="submit">
  12.   </form>
  13. </body>
  14. </html>

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

MND对此的描述：

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

  1. 新建main.js，用node的http模块开启http服务。
  1. const http = require("http");
  2. const fs = require("fs");
  3. const formidable = require("formidable");
  5. let server = http.createServer((req,res)=>{
  6.   if(req.url = "/upload"){
  7.     switch(req.method){
  8.       case "GET":
  9.         //使用流来加载upload.html
  10.         fs.createReadStream("./upload.html").pipe(res);
  11.         break;
  12.       case "POST":
  13.         dealUpload(req,res);
  14.         break;
  15.         default:
  16.           console.log("other method...");
  17.           break;
  18.     }
  19.   }else{
  20.     res.writeHead(302,{"Location": "upload"});
  21.     res.end();
  22.   }
  23. })
  25. //监听8080端口
  26. server.listen(8080);
  28. console.log("listening on 8080, http://127.0.0.1:8080");
  1. 使用formidable处理表单数据，并对生成的新文件重命名。
  1. function dealUpload(req,res){
  2.   var form = formidable.IncomingForm();
  3.   //保持原有扩展名
  4.   form.keepExtensions = true;
  5.   //设置上传目录
  6.   form.uploadDir = __dirname + "/files/";
  7.   form.parse(req,function(err,fields,files){
  8.     if(err) throw err;
  9.     console.log(fields);
  10.     let oldFilename = files.up_file.name;
  11.     //重命名上传的文件
  12.     fs.rename(files.up_file.path, form.uploadDir + generateFilename(oldFilename),err=>{
  13.       if(err) {
  14.         console.log("重命名失败");
  15.         console.log(err);
  16.       }else{
  17.         console.log("重命名成功!");
  18.       }
  19.     })
  20.     res.writeHead(200,{"Content-type":"text/html;charset='utf-8'"});
  21.     res.write('<meta charset="UTF-8" />');
  22.     res.end("<h1>上传结束</h1>");
  23.   })
  24. }
  26. function generateFilename(oldFilename){
  27.   //将老的文件名拼上时间戳，这样既不会命名冲突又可以看出文件的上传事件
  28.   let d = new Date();
  29.   let names = oldFilename.split(".");
  30.   return `${names[0]}_${""+d.getFullYear() + (d.getMonth()+1) + d.getDate() +'_'+ d.getHours() + d.getMinutes() + d.getSeconds()}.${names[1]}`;
  31. }

运行效果

使用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. C# Base64解码小工具编写

    1 界面如下 2 关键代码如下 try { var callback = reqStr.Deserialize<dynamic>(); resStr = Newtonsoft.Json.J ...

  2. DTU的工作原理和流程

    DTU是无线数据传输模块,采用2G,3G,4G网络,将本地串口数据经DTU打包成TCP或者UDP数据进行远程传输的设备.使用方便.已经在各行业远程数据传输,设备监控等领域大量应用.如智能仪器仪表.智能 ...

  3. leetcode24:word-ladder-ii

    题目描述 给定两个单词(初始单词和目标单词)和一个单词字典,请找出所有的从初始单词到目标单词的最短转换序列: 每一次转换只能改变一个单词 每一个中间词都必须存在单词字典当中 例如: 给定的初始单词st ...

  4. CSS3：overflow属性详解

    1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...

  5. MySQL全面瓦解10：分组查询和聚合函数

    概述 相信我们经常会遇到这样的场景:想要了解双十一天猫购买化妆品的人员中平均消费额度是多少(这可能有利于对商品价格区间的定位):或者不同年龄段的化妆品消费占比是多少(这可能有助于对商品备货量的预估). ...

  6. JAVA 去除字符串前后的指定字符

    为了显示效果更好,我们可以将多余的字符去掉,代码如下: /** *去掉字符串前后的指定字符 */ public static String trimBothChars(String str, Stri ...

  7. 三：登录功能实现，servlet

    1)servlet 2)request 请求对象 3)response响应对象 4)转发 5)重定向 1.servlet就是用来处理客户端的请求的 1.1去官网下载 1.2 在STS上添加该包ctrl ...

  8. python之路《模块》

    1.time模块 FUNCTIONS asctime(...) asctime([tuple]) -> string Convert a time tuple to a string, e.g. ...

  9. 使用日志系统graylog获取Ceph集群状态

    前言 在看集群的配置文件的时候看到ceph里面有一个graylog的输出选择,目前看到的是可以收集mon日志和clog,osd单个的日志没有看到,Elasticsearch有整套的日志收集系统,可以很 ...

  10. [LeetCode题解]160. 相交链表 | 双指针 + 哈希表

    方法一:双指针 解题思路 假设链表存在相交时,headA 的长度为 a + c,headB 的长度为 b + c.如果把 headA 连上 headB,headB 连上 headB 的话,当遍历这两个 ...