学习node,文件上传是必须要会的啊!至于node或者express接收get和post参数已经在上一篇文章说过了,今天记录一下文件上传的最简单的方式(自认为)。
当然,这里还是用的express来做网络请求响应。用到第三方的模块需要安装一下npm install multiparty
还有2个自带的模块util,fs
好了直接代码演示:
首先是上传文件的index.html,为了简单的演示,直接用form表单提交:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>node get post data </title>
</head>
<body>
<form action="./postData" method="post" enctype='multipart/form-data'>
<input type="text" name="id">
<input type="text" name="name">
<input type="number" name="age">
<input type="file" name="logo" multiple="multiple">
<button type="submit">submit</button>
</form>
</body>
</html>
其实看着很普,只需要注意两点。第一个就是enctype='multipart/form-data
这个参数不要忘记了。
第二点:<input type="file" name="logo" multiple="multiple">
看到吗多了一个multiple。还有要记住这个name=”logo”,后台接收时需要用到。
后台接收的代码:
var express = require("express");
var app = express();
var multiparty = require('multiparty');
var util = require('util');
var fs = require('fs');
// 访问首页时返回index.html文档
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
// 使用 req.body(id)获取post传递的参数
app.post("/postData",function(req,res,next){
var form = new multiparty.Form({uploadDir: './public/files/'});
form.parse(req, function(err, fields, files) {
if(err){
console.log('parse error: ' + err);
} else {
var inputFile = files.logo[0];
var uploadedPath = inputFile.path;
console.log('filespath='+uploadedPath);
console.log('filesTmp: ' + inputFile);
console.log('Filename: ' + inputFile.originalFilename);
var dstPath = './public/files/' + inputFile.originalFilename;
//重命名为真实文件名
fs.rename(uploadedPath, dstPath, function(err) {
if(err){
console.log('rename error: ' + err);
} else {
console.log('rename ok');
}
});
}
res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
res.write('received upload:\n\n');
res.end(util.inspect({fields: fields, files: files}));
})
})
// 暴露出去静态资源
app.use(express.static('public'));
app.listen("3131");
console.log('pro running 3131');
就是这么简单,node实现文件上传和接收。
需要注意的几个点再次提醒下:
其实就是三个变量,
第一个form = new multiparty.Form({uploadDir:'./public/files/'});
这个要规定好你要保存的路径,如果找不到files,你就自己创建一个文件夹。
第二个变量:var inputFile = files.logo[0];
看到了?files后面的logo可就是你在上传文档的页面index.html 里面定义的input 里面的name属性参数。一定要改成自己的。
第三个变量:var uploadedPath = inputFile.path;
这个就是保存的路径,获取到要保存的路径。只要这三个不错,下面直接copy就OK啦。
看下打印出来的参数,基本上你就全部明白了。
下图是我成功后的输出效果。