上传文件用的 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 }); 

});

哈哈，好开心可以帮到你 解决就好，我其实也很小白😂