req.file 未定义 - multer 和 nodejs

Question

除图像文件外，所有数据都被发送到后端。我一直收到 req.file is undefined，这会阻止数据存储在数据库中。

在服务器端，我有一个 routes 文件夹，用于处理用户的新食物条目。

const multer = require('multer')

var fs = require('fs')

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads')
  },
  filename: function(req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({storage: storage})
router.route('/add', upload.single('foodImage')).post((req, res) => {
    var img = fs.readFileSync(req.body.file.path);
    var encode_image = img.toString('base64')
    var finalImg = {
      contentType: req.file.mimetype,
      image: new Buffer(encode_image, 'base64')
    }

    console.log(finalImg);
// remaining code left out

在前端，我有一个表单可以收集用户的输入，其中包括照片和文字说明。这是在组件文件中。


fileSelectedHandler(e) {
    this.setState({
      selectedFile: e.target.files[0]
    })
  }

onSubmit(e) {
const nutrition = {
            'calories': calories,
            'fat': fat,
            'sugar': sugar,
            'carbs': carbs,
            'cholesterol': cholesterol,
            'protein': protein,
            'photo': result.foods[0].photo.thumb,
            'date': this.state.date,
            'description': this.state.description,
            'food_list': food_list.toString(),
            'foodImage': this.state.selectedFile
        }

        console.log(nutrition);

        axios.post('http://localhost:5000/nutrition/add', nutrition).then(res => console.log(res));
            
        window.location = '/nutrition';

//remaining code hidden


render() {
    return (
<div>
      <h3>Create New Nutrition Log</h3>
      <form onSubmit={this.onSubmit} encType='multipart/form-data'>
        <div className="form-group">
          <label>Upload food image!</label><br></br>
          <input type="file" onChange={this.fileSelectedHandler} name="foodImage"/>
        </div>
        <div className="form-group"> 
          <label>Description: </label>
          <input  type="text"
              required
              className="form-control"
              value={this.state.description}
              onChange={this.onChangeDescription}
              />
        </div>

//remaining code hidden

Answer 1

。客户端

要从客户端向服务器发送图像，您的请求数据应具有 multipart/form-data 结构。您可以通过以下方式实现：

const data = new FormData();

data.append('calories', calories)
data.append('fat', fat)
data.append('sugar', sugar)
data.append('carbs', carbs)
data.append('cholesterol', cholesterol)
data.append('protein', protein)
data.append('photo', result.foods[0].photo.thumb)
data.append('date', this.state.date)
data.append('description', this.state.description)
data.append('food_list', food_list.toString())
data.append('foodImage', this.state.selectedFile)

axios.post('http://localhost:5000/nutrition/add', data)
     .then(res => console.log(res));

此外，您设置 encType 的这部分代码没有用，因为您正在使用 axios 进行自定义 post，而不是直接从表单。（您可以删除 encType）。

<form onSubmit={this.onSubmit} encType='multipart/form-data'>

。服务器端

并从服务器端获取文件：

// BEFORE
// router.route('/add', upload.single('foodImage')).post((req, res) => {

// AFTER
router.route("/add").post(upload.single("foodImage"), (req, res) => {
   // You can get image details (path, fieldname, size, etc) from request.file.
   console.log(req.file);

   // And JSON data, you can get it normally from request.body
   console.log(req.body);

同时查看您的 post 路径，在服务器上您将其设置为 '/add' 并且在客户端上您将请求发送到 'nutrition/add'

最后，link 可能对您有用。

req.file 未定义 - multer 和 nodejs

req.file is undefined - multer and nodejs

node.js

reactjs

multer