Question

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

在服务器端，我有一个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进行自定义发布，而不是直接来自表单。（您可以删除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);

还要查看您的发布路径，在服务器上将其设置为'/add'，在客户端上，将请求发送至'nutrition/add'

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

req.file未定义-multer和nodejs

1 个答案: