如何使用nodejs,express,mongodb和react存储图像

时间:2019-06-10 10:05:33

标签: node.js mongodb express react-native

我正在尝试使用node和mongodb存储图像。我在前端使用了react。我尝试了使用multer,但出现错误,提示“ TypeError:路径必须是字符串或Buffer”。还有其他方法使用node和mongodb存储图像

 //server.js

 const multer = require("multer");

 const storage = multer.diskStorage({
 destination: function (req, res, cb) {
         cb(null, 'uploads/')
      }
 });

 const upload = multer({
     storage: storage
 });

 router.route('/imageCard/add').post(upload.single('file'), function                     (req, res) 
 {
     let imageDetails=new ImageCard();
     imageDetails.name=req.body.name;
     imageDetails.imgSource= fs.readFileSync(req.body.imgSource);
     imageDetails.price=req.body.price;
     imageDetails.size=req.body.size;
     imageDetails.save().then(details=>
      {
          res.status(200).json('Added');
      }).catch(err=>{
     result.status(400).send('Failed to Add');
     })

 });

 //(model )
 import mongoose from 'mongoose';
 const Schema = mongoose.Schema;

 let imageCard=new Schema({

     name:{
         type:String
     },
     imgSource:{

         type:Buffer
     },
     size:{
         type:String
     },
     price:{
         type:String
     }
 });

 export default mongoose.model('ImageCard', imageCard);

 //react file
 onChange(e) {   
    this.state.file = e.target.files[0];  
 }

 onsubmit() {
    console.log('on submit');
    const newDoc = {
        name: document.getElementById('name').value,
        price: document.getElementById('price').value,
        size: document.getElementById('size').value,

        imgSource:this.state.file
    }
    console.log(newDoc.imgSource);
              axios.post(`http://localhost:4000/imageCard/add`,newDoc).then(res=>{
        console.log(res.data);
    }).catch(err=>{
        console.log(err);
    });

}

如果我使用以下代码,则会出现此错误:TypeError:无法读取未定义的属性“路径”

imageDetails.imgSource= fs.readFileSync(req.file.path);

我没有在server.js文件中收到imgSource值,它显示为空值。

1 个答案:

答案 0 :(得分:0)

几天前我遇到了同样的问题。 最后,我通过执行以下操作来实现它:

    const multer  = require('multer');
const path = require('path');


const upload = multer({
    storage: multer.diskStorage({
        destination: (req, file, callback) => {
            try {
                let path = "What ever your path is";
                fs.mkdirsSync(path);
                callback(null, path);
            }catch (e) {
                callback(jsonError(e),null)
            }
        },
        filename: (req, file, callback) => {
            //original name is the uploaded file's name with ext
            callback(null, mongoose.Types.ObjectId()+path.extname(file.originalname));
        }
    })
});

然后在您的路线中设置uoload。 请注意,一旦multer工作,您将拥有一个具有名称,大小等的新req.file或