解析form表单插件 formidable
例子:
前台 html:
//form表单提交(页面会刷新)
<form action="http://127.0.0.1:3000/test" method="post" enctype="multipart/form-data">
<input type="file" id="" name="upload" multiple="multiple"/> <br />
<input type="text" name="username"/>
<input type="submit" value="Upload" />
</form>
//ajax提交from表单(无页面刷新)
<form id="uploadForm">
<input type="file" id="upload" name="upload" multiple="multiple"/> <br />
<input type="text" name="username"/>
<input type="button" value="上传" onclick='shangchuan()'/>
</form>
<script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript">
function shangchuan(){
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: 'http://127.0.0.1:3000/test' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (value) {
console.log(value)
},
error: function (err) {
console.log(err)
}
});
}
</script>
服务端 node(返回上传文件路径名)
exports.test = function (req, res) {
var form = new formidable.IncomingForm();
form.encoding = 'utf-8'
form.keepExtensions = true //保留后缀名
form.uploadDir = "./public/" //上传路径
form.multiples = true; //多图上传
//多文件存储到 files
var files = []
form.on('file', function (filed, file) {
files.push([filed, file]);
})
//解析form表单 fields为表单中非文件内容 files为文件信息
form.parse(req, function (err, fields, files) {
console.log(fields)
var paths = []
//单文件
if (typeof(files.upload.length) === "undefined") {
let path = files.upload.path.replace(/public/g, '')
path = config + path.replace(/\\/g, '/')
paths.push(path)
res.json({paths: paths})
} else {
//多文件
for (let i = 0; i < files.upload.length; i++) {
let path = files.upload[i].path.replace(/public/g, '')
path = config + path.replace(/\\/g, '/')
paths.push(path)
}
res.json({paths: paths})
}
})
}
//解析base64,上传图片(前台向后台传base64数组)
function upload(req,res){
var imgs=req.body.imgs
var paths=[]
for(var i=0;i<imgs.length;i++){
//将前台传来的base64数据去掉前缀
var img = imgs[i].replace(/^data:image\/\w+;base64,/, '');
var imgBuffer = new Buffer(img, 'base64');
var path = 'public/images'+ Date.now() +'.png'
paths.push(path)
//写入文件
fs.writeFile(path, imgBuffer,function(err,date){
if(err){
console.log(err)
}
if(paths.length==imgs.length){
res.json({code:200,result:paths})
}
});
}
}
以前用Java写过图片上传,一对比,感觉node要比Java写上传简单点,formidable详细配置请看官方文档