0

我有一个 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() {
  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>

);
}

节点 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 });
  } 
}

控制台截图：-

在此处输入图像描述

4

1 回答 1

0

我想你还没有设置一个view_enginefor express。app.set('view engine', 'jade');没有设置类似的东西。那是因为当您尝试render在下面的代码中时，它会寻找一个。

if(err){
    res.render('index', {
      msg: err
    });
}

添加视图引擎或将其更改为 JSON 响应（推荐）。

于 2020-05-08T07:38:30.423 回答