前述

本人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. Markdown tricks

    编辑排版 仅仅了解 Markdown 语法还不够,知道这些 排版技巧 增色您的文章内容. 空格和空行 留白,从艺术角度上说,留白就是以"空白"为载体进而渲染出美的意境的艺术.从应用 ...

  2. python开发基础(二)常用数据类型调用方法

    1 数字: int 2 3 int : 转换,将字符串转化成数字 4 num1 = '123' 5 num2 = int (a) 6 numadd = num2 +1000 7 print(num2) ...

  3. kafka的基本安装与使用

    kafka的基本安装与使用 1.上官网下载tar包 2.解压 3.运行zookeeper 4.运行kafka服务器 5.创建topic 6.发送消息 7.监听消息 1.上官网下载tar包 https: ...

  4. 6.1 接口 - 6.3 lambda表达式

    6.1 接口 接口概念 接口是对类的一组需求描述,这些类要遵从接口描述的统一格式进行定义.设计目的是解决多继承的问题 接口中所有方法时 public 不用现实声明 java.lang.Comparab ...

  5. nginx负载均衡基本配置和日志按天写

    简单记录一下. upstream dynamic_pools{        server 127.0.0.1:8080;    } #动态命令转交给后端        location /api   ...

  6. 比特魔方原创,用十分钟在Cocos-BCX上发行了自己的NFT

    比特魔方原创 作者 | 第二个区块 出品 |比特魔方 NFT正在积累越来越多的共识.每看到人们讨论NFT,我隐约就能联想到2019年人们谈论DeFi的时候.隐约让我感到欠缺的是,相对2019年的DeF ...

  7. Css gray 无法覆盖IE10

    网站变灰这个效果很常见,在我这里暂时没有找到最优解决方式, 先把今天的研究结果记录一下. 第一种方案 : 对所有静态资源文件进行灰度处理,得到新一个资源目录,例如asset_ori 原始资源    a ...

  8. MVCC(转)

    什么是 MVCC MVCC (Multiversion Concurrency Control) 中文全程叫多版本并发控制,是现代数据库(包括 MySQL.Oracle.PostgreSQL 等)引擎 ...

  9. 差分进化算法介绍及matlab实现

    引言 差分进化算法是基于群体智能理论的优化算法,是通过群体内个体间的合作与竞争而产生的智能优化搜索算法,它保留了基于种群的全局搜索策略,采用实数编码.基于差分的简单变异操作和"一对一&quo ...

  10. ceph luminous版本限制osd的内存使用

    引言 ceph自从到了L版本以后,L版本的启用,对性能本身有了极大的提高,一直对这个比较不放心的就是内存的占用,刚开始的时候记得大量dd就可以把内存搞崩掉,这个应该是内部的设计逻辑需要更多的内存的占用 ...