如何使用Node JS从react js上传文件

我有一个react js应用程序。我将使用Node Js从react js上传文件。我尝试了下面的代码，但是它显示错误消息为“未指定默认引擎，也没有提供扩展名。 “

请检查下面的代码以与节点js反应并建议如何解决此问题。

设置文件的初始状态：-

this.state = {
  selectedFile: null
}

this.formData = {
  file : ''
}

上传文件：-

UploadHandler = () => {
 this.formData.file = this.state.selectedFile;

 console.log(this.formData.file);
  axios.post('localhost:5000/ap/v1/Users/',this.formData,{headers: {'Content-Type': 'multipart/form-data'}})

  .then(res => {

      //this.props.history.push('/UserList')

  })  


}

}

当我们从浏览器中选择文件时将文件设置为状态：-

fileHandler = (evt) => {

  console.log(evt.target.files[0]);
  const f = evt.target.files[0];
  this.setState({
    selectedFile: evt.target.files[0],
    loaded: 0,
  })         

  if (f) {
      const reader = new FileReader();
      reader.onload = ({ target: { result } }) => {

          this.setState({preview:result});
      };

      reader.readAsDataURL(f); // you can read image file as DataURL like this.
  } else {
    this.setState({preview:null});
  }
};

render：-

 render() {
  return (
<div className="col-sm-2">
        {/* <img className='img-fluid' src={ users } alt='Alt text'/> */}

        <div>
        <img className='img-fluid' src={this.state.preview} />
        <br></br>  
            <input 
               type="file"
               accept="image/*"
               width="90px"
               color="transparent"
               onChange={this.fileHandler}

            />

        </div>

      </div>


    </div>

);
}

Node JS代码：-

var multer = require('multer')

// Set The Storage Engine
const storage = multer.diskStorage({
  destination: './public/uploads/',
  filename: function(req, file, cb){
    cb(null,file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});

// Init Upload
const upload = multer({
  storage: storage,
  limits:{fileSize: 1000000},  //Size in bytes
  fileFilter: function(req, file, cb){
    checkFileType(file, cb);
  }
}).single('file');

// Check File Type
function checkFileType(file, cb){
  // Allowed ext
  const filetypes = /jpeg|jpg|png|gif/;
  // Check ext
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  // Check mime
  const mimetype = filetypes.test(file.mimetype);

  if(mimetype && extname){
    return cb(null,true);
  } else {
    cb('Error: Images Only!');
  }
}

exports.createUsers = async (req, res, next) => {               // this is an upload controller

   try {

    upload(req, res, (err) => {
      console.log('upload in');
      if(err){
        res.render('index', {
          msg: err
        });
      } else {
        if(req.file == undefined){
          res.status(400).json({
            msg: 'Error: No File Selected!'
          });
        } else {
          res.status(200).json({ success: true, msg: 'File Uploaded!', file: `uploads/${req.file.filename }`});
              } 
    }
    })
  } catch (error) {
    console.log(error);
    res.status(400).json({ error: error });
  } 
} 

我认为您尚未将view_engine设置为express。未设置app.set('view engine', 'jade');。这是因为当您尝试在下面的代码中使用render时，它将寻找一个。