折腾到现在，尝试了，express-formidable, busboy, formidable, multer … 但是都无法在工程中保存上传的图片文件，数据库用的是mongoose，数据库中有图片记录，就是在工程中找不到，谁有办法？
上传文件用的 form 加 enctype=‘multipart/form-data’ 了吗？另外 multer 里面的 single 跟 array 接受的是 input 元素的 name。
之前我的问题描述可能太简短了，具体是这样的： 工程是webpack+react+express+mongo，借鉴了@nswbmw 《一起学 Node.js》中上传文件的方式，所以我使用了 app.use(require(‘express-formidable’)({ uploadDir: path.join(__dirname, ‘/public/img’), keepExtensions: true })); 我的form写在了react组件中，表格加上了这句encType="multipart/form-data"之后就会报错 : Uncaught Error: _registerComponent(…): Target container is not a DOM element.(…) 网上说错误原因是js在头部引用了，但是我的js文件是在底部引用的。 我尝试去掉encType="multipart/form-data"这句话之后，没有报错，而且mongo数据库中也能找到上传的信息，但是图片没有上传到工程中。 @nswbmw 《一起学 Node.js》没有使用webpack和react。 谁有使用过webpack+react+express+mongo上传图片的方法啊？
好巧，我在express中用的formidable上传的图片，用express-formidable失败了 http://www.tuicool.com/articles/F7JrMjj 这个帮了我很多
@mengLLLL 非常感谢！帮了很大忙！现在我可以上传文件了，但是写入mongodb中遇到了问题，在route文件中的代码是： router.post(’/profile’,function(req,res,next){ var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = ‘utf-8’; //设置编辑 form.uploadDir = __dirname+’/public/img/’; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var bookData={
bookname: fields.bookname,
bookimg: files[0],
bookdesc: fields.bookdesc
}
Book.create(bookData,function(error,book){
if(error){
return next(error)
}else{
return res.redirect('/');
}
})
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
}); 其中这部分代码： var bookData={ bookname: fields.bookname, bookimg: files[0], bookdesc: fields.bookdesc } bookname和bookdesc都可以写到mongo中，但是bookimg，也就是图片该怎么写到mongo中呢？
关于如何在react+webpack+express+mongo工程中上传图片并保存在数据库中的问题终于解决了，首先react组件中的表单一定要添加encType="multipart/form-data"这句话，表单中上传代码：<input type=“file” name=“my_file” id=“my_file” className=“form-control”></input> 这句话一定不要忘记name的设置，这里name值是my_file。 route中的完整代码如下： ‘use strict’; var express=require(‘express’); var router=express.Router(); var Book=require(’…/models/book.js’); var formidable = require(‘formidable’), fs = require(‘fs’), TITLE = ‘formidable上传示例’, AVATAR_UPLOAD_FOLDER = ‘/img/’; __dirname = process.cwd(); router.post(’/profile’,function(req,res,next){ var form = new formidable.IncomingForm(); //创建上传表单 form.encoding = ‘utf-8’; //设置编辑 form.uploadDir = __dirname+’/public/img/’; //设置上传目录 form.keepExtensions = true; //保留后缀 form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
var extName = ''; //后缀名
switch (files.my_file.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支持png和jpg格式图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
var newPath = form.uploadDir + avatarName;
console.log(newPath);
fs.renameSync(files.my_file.path, newPath);
var bookData={
bookname: fields.bookname,
bookimg: newPath,
bookdesc: fields.bookdesc
}
Book.create(bookData,function(error,book){
if(error){
return next(error)
}else{
// 这里如果res 会报错
// return res.redirect('/');
}
})
});
res.locals.success = '上传成功';
res.render('index', { title: TITLE });
});
