前述
本人node初学者，此前使用原生node实现文件上传时遇到了一些困难，只做到了.txt 和.png两中格式的文件可以正常上传，如果上传其他格式文件服务端保存的文件会无法正常打开，原因是对form表单传来的数据处理不彻底。后来查找许多资料了解到了formidable这个第三方模块,可通过以下指令安装：
npm i formidable
官方对它的描述：
A Node.js module for parsing form data, especially file uploads.
一个专门用来处理表单数据尤其是文件上传的Node.js模块。
实现过程
- 首先新建一个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>元素时使用此值。
- 新建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");
- 使用
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可以看到：
选择一个文件后点击提交：
然后即可在之前设置保存目录下看到已保存且重命名的文件：
如有错误欢迎指正