前述

本人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. Servlet程序访问jsp文件404的一种情况

    启动Jsp Run on Server的时候出现404的错误,如下图: 检查一下是否文档目录如下图:jsp应该在WebContent下,而不是WEB_INF下,访问放在WEB_INF下的jsp文件就会 ...

  2. C# 集合类（四）

    C# 集合类自己经常用到: 数组(Array).动态数组(ArrayList).列表(List).哈希表(Hashtable).字典(Dictionary),对于经常使用的这些数据结构,做一个总结,便 ...

  3. 从零到千万用户，我是如何一步步优化MySQL数据库的？

    写在前面 很多小伙伴留言说让我写一些工作过程中的真实案例,写些啥呢?想来想去,写一篇我在以前公司从零开始到用户超千万的数据库架构升级演变的过程吧. 本文记录了我之前初到一家创业公司,从零开始到用户超千 ...

  4. 【开发板试用报告】学习GPIO编程

    温湿度传感器 参考许老师教程:https://gitee.com/hihopeorg/ 下载源码git clone https://github.com/xusiwei/harmonyos-aht20 ...

  5. php 检测敏感字

    public function getMin($content){//调用接口 $content_url ="http://www.ju1.cn/index.php/Index/add.ht ...

  6. ubuntu 文件编码格式 转换

    正在学习jquery,之前在windows下弄的编码到了 ubuntu下,乱码: 找到一个方法: iconv : 源文件:a.htm 格式:gbk: 目标:    a.html 格式:utf8: ic ...

  7. CSS之background——背景与渐变练习题

    1.单选题 将背景的绘制区域规定到内容框,应使用background-clip属性中的哪个属性值? A content-box B border-box C padding-box D none-bo ...

  8. UnixIPC之共享内存

    Unix-IPC之共享内存 一,共享内存的概念 共享内存通信技术是一种最快的可用IPC形式,它是针对其他通信机制运行效率低和设计的新型通信技术(其他的如:信号量,管道,套接字等).这种通信技术往往与其 ...

  9. create-react-app添加对TypeScript支持

    背景 最近一直在重构react项目,由于项目历史原因,将之前parcel打包工具换成了webpack,并选择了使用create-react-app作为项目开发脚手架. 接着就是把项目中flow类型检查 ...

  10. http请求返回ObjectJson,Array之类转换类型

    以下所说的类来自:package com.alibaba.fastjson 1,形如以下返回,其实是个json的map形式的返回 { "success": true, " ...