req.file未定义-multer和nodejs

Question

除了图像文件之外，所有的数据都被发送到后端。我一直得到req.file是未定义的，这阻止了数据存储在数据库中。

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的，而不是直接从Form进行。（可以拆下外罩）。

<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'

最后，有一个链接可能对你有用。rest-api-file-ie-images-processing-best-practices