nodejs文件上传过程中遇到问题可以咨询QQ：1416759661 微信号：yyjcw10000
前端代码：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
文件上传:<input type="file" name="myfile" class="input-file"/>
<input type="button" id="btnsave" value="上传"/>
<script>
document.querySelector("#btnsave").onclick=function(){
var fileInput = document.querySelector('.input-file');
var files = fileInput.files
//console.log(files);
var formData = new FormData(); //创建formData对象
//判断数据 若有 则添加数据
if(files.length > 0){
[].slice.call(files).forEach(function(value,index){
formData.append('img' + index,value,value.name) //遍历添加数据
console.log(value,value.name);
var httpDemo = new XMLHttpRequest(); //创建httprequest对象
httpDemo.open('post','/upload',true); //初始化请求 post方式 接口 异步
httpDemo.onload = function(e){
console.log(e);
}
httpDemo.send(formData); //发送请求
})
}else {
alert('请先选择图片');
return ;
}
};
</script>
</body>
</html>
后端代码：
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var formidable = require('formidable'); //载入formidable
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static('src',{ // 静态资源中间件
setHeaders : function(res,path,stat){
res.setHeader('Cache-Control', 'max-age=' + 6000);
}
}));
app.all("*",function(req,res,next){
//设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
});
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.post('/upload',function(req,res){
var form = new formidable.IncomingForm();
form.encoding = 'utf-8';
form.uploadDir = '../public/images';
form.keepExtensions = true;
form.parse(req,function(err,field,files){
console.log(files);
});
res.send({
'msg':'upload file'
});
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;