使用模块node-multiparty实现文件上传
由于Express 4与Express 3的在中间件的使用上具有很大的不同：许多以前内置在Express 3中的中间件，现在都需要自己通过npm进行下载，操作。今天刚好碰到一个要修改文件上传功能的中间件。所以抛弃了原有的bodyParser中间件，在gitHub上找到了node-multiparty模块，跟着API做了一个小例子，分享给大家。
首先来看客户端代码
<!DOCTYPE html>
<html>
<head>
<title>向服务器上传文件</title>
<meta charset="utf-8">
<script>
function uploadFile(){
var formData = new FormData();
var files = document.getElementById(‘file‘).files;
var file = files[0];
formData.append(‘myfile‘, file);
var xhr = new XMLHttpRequest();
xhr.open(‘POST‘, ‘index.html‘, true);
xhr.onload = function (e){
if (this.status == 200){
document.getElementById(‘result‘).innerHTML = this.response;
}
};
xhr.send(formData);
}
</script>
</head>
<body>
<h1>使用bodyParser中间件上传文件</h1>
<form id = ‘form1‘ enctype="multipart/form-data">
请选择文件<input type="file" id="file" name="file"><br>
<input type="button" value="上传文件" onclick="uploadFile();"><br>
</form>
<output id="result"></output>
</body>
</html>
服务端代码如下：
var express = require(‘express‘);
var fs = require(‘fs‘);
var multiparty = require(‘multiparty‘);
var app = express();
app.get(‘/index.html‘, function (req, res){
res.sendFile(__dirname + ‘/index.html‘);
});
app.post(‘/index.html‘, function (req, res){
var form = new multiparty.Form({uploadDir: ‘./public‘});
form.on(‘error‘, function(err) {
console.log(‘Error parsing form: ‘ + err.stack);
});
form.parse(req, function (err, fields, files){
var filesTmp = JSON.stringify(files,null,2);
if (err){
console.log(‘parse error: ‘ + err);
res.send("写文件操作失败。");
}else {
res.send("文件上传成功");
console.log(‘parse files: ‘ + filesTmp);
var fileNameArr = Object.keys(files);
var firstFilename = fileNameArr[0];
var fileDataArr = files[firstFilename];
console.log( typeof fileDataArr);
console.log(fileDataArr);
var fileData = fileDataArr[0];
var uploadedPath = fileData.path;
var dstPath = ‘./public/‘ + fileData.originalFilename;
fs.rename(uploadedPath, dstPath, function(err) {
if (err){
console.log("重命名文件错误："+ err);
} else {
console.log("重命名文件成功。");
}
});
}
});
});
app.listen(1337, ‘127.0.0.1‘);
启动服务端：node app.js
在浏览器中输入：http://localhost:1337/index.html,你会看到如下的界面
点击选择任意文件，然后在点击上传文件，你会看到在你的项目更目录下的public文件夹下多出了你刚才上传的文件。。
另外也可以使用multer模块来实现文件上传
时间： 2024-10-24 02:56:23