使用multer从React上传文本文件到Node。

Question

文件上传的React代码。

onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
    console.log(event.target.files[0])
  }

  onClickHandler = () => {
    const data = new FormData() 
    data.append('file', this.state.selectedFile)
    console.log(this.state.selectedFile)
    axios.post(`${config.server}/upload`, data,{})
     .then(res => { // then print response status
         console.log(res.statusText)
  });

}
<div>
        <input type="file" name="file" onChange={this.onChangeHandler}/>
        <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>
    </div>

Node的文件处理代码。

var multer=require("multer");
var cors = require('cors');

app.use(cors())
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
    cb(null, 'public')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' +file.originalname )
  }
})
var upload = multer({ storage: storage }).single('file')

app.post('/upload',function(req, res) {
    console.log(req.file) 
    upload(req, res, function (err) {
           if (err instanceof multer.MulterError) {
               return res.status(500).json(err)
           } else if (err) {
               return res.status(500).json(err)
           }
      return res.status(200).send(req.file)

    })

});

Node的文件处理代码： onChangehandler 在反应中显示文件在 console.log() 但在使用按钮提交数据时 Upload 其中使用了 onClickHandler 函数。我从服务器上得到的响应是500，目录名为 public 它应该存储文件的地方没有被创建。这是怎么回事，如果有人能帮助我。我是一个新的文件处理在react和node。我正在使用下面的链接 作为参考。它不需要存储文件，我只需要处理文件和读取文件内的内容。我所需要做的就是处理文件并读取文件内的内容。如果有其他方法代替存储的话。谢谢你的帮助。

Answer 1

问题已经解决了。我没有这个文件夹 public 这是我保存文件的目的地。代码中不需要修改。目标文件夹需要存在。如果不存在，Multer无法创建文件夹。