req.file是未定义的 - multer和nodejs

8 浏览
0 Comments

req.file是未定义的 - multer和nodejs

除了图像文件外，所有数据都会被发送到后端。我一直收到req.file未定义的错误，这导致数据无法存储到数据库中。\n在服务器端，我有一个处理用户新食物条目的路由文件夹。\n

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);
// 省略其余代码

\n在前端，我有一个表单，用于收集用户的输入，其中包括照片和文本描述。这在一个组件文件中。\n

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';
// 省略其余代码
render() {
    return (
      
创建新的营养日志

      

          

          
          
          
// 省略其余代码

0

1 答案

0 Comments

问题的原因是在客户端发送请求时，未正确设置请求数据的格式为`multipart/form-data`，导致服务器无法正确解析请求中的文件数据。

解决方法是在客户端使用`FormData`对象将数据以`multipart/form-data`的格式发送给服务器，并在服务器端使用`multer`中间件来处理文件上传。

客户端代码示例：

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请求，而不是直接使用表单提交。

服务器端代码示例：

router.route("/add").post(upload.single("foodImage"), (req, res) => {
   console.log(req.file); // 获取上传的文件信息
   console.log(req.body); // 获取其他表单数据
});

请确保服务器端的路由路径与客户端发送请求时的路径一致，比如在服务器端设置为`'/add'`而在客户端发送请求时为`'nutrition/add'`可能会导致错误。

以上是解决问题的方法和注意事项，你可以参考这些步骤来修改代码，实现正确的文件上传和表单数据获取。如果仍然遇到问题，可以参考提供的链接查找更多有用的信息。

0