未为多个文件上载定义req.file

bttbmeg0  于 2022-09-21  发布在  Node.js
关注(0)|答案(4)|浏览(170)

我已经通读了这里所有可能的答案,但我不再确定问题可能是什么,因为它们都不起作用。我有一个上传单个图像的表单,它按预期工作,但在另一个表单上,我尝试上传多个文件并有表单输入,req.file始终是未定义的,图像数据最终保存在req.body中。因此,我认为可能存在一个问题,即穆特无法获得文件数据...?

我在一些地方读到,正文解析器可能无法很好地处理Multer,但不幸的是,我两者都需要。

路由

const destination = './public/uploads/posts';
const storage = multer.diskStorage({
  destination: destination,
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});
const upload = multer({storage}).array('images');

router.post('/posts', (req, res) => {

  upload(req, res, (err) => {
    if(err) {
      console.log('errors', err)
      res.json({success: false, error: err})
    } else {
      if(req.files === undefined) {
        console.log('error: Images returned undefined');
      } else {
        const { title, description, url, auth_name, auth_id } = req.body;

        if(!title || !description) {
          return res.json({
            success: false,
            error: 'All fields required',
            message: 'Title and description fields are required'
          });
        }

        // path we store in the db
        let imageLocation = [];
        const post = new Post();

        for (const file of req.files) {
          imageLocation.concat('/uploads/posts/' + file.filename)
        }

        post.title = title;
        post.description = description;
        post.url = url;
        post.author_name = auth_name;
        post.author = auth_id;
        post.images = imageLocation;
        post.save((err, post) => {
          if(err) {
            return res.json({ success: false, error: err, message: 'post failed' });
          } else {
            return res.json({ success: true, message: "added new post", post: post });
          }
        });
      }
    }
  });
});

在Reaction组件中发布

我的图像设置为从DropZone包中获得的状态(我也在没有DropZone的情况下进行了测试,结果相同。我确保输入的名称是“图像”

submitNewPost = () => {
    const { title, description, url, images } = this.state;
    const auth_id = this.props.author_id;
    const auth_name = this.props.author_name;

    const formdata = new FormData();
    formdata.append('title', title);
    formdata.append('description', description);
    formdata.append('url', url);
    formdata.append('author_name', auth_name);
    formdata.append('author', auth_id);
    formdata.append('images', images);

    fetch('/api/posts', {
      method: 'POST',
      body: formdata
    }).then(res => res.json())
      .then((res) => {
        if (!res.success) {
          this.setState({ message: res.message });
        } else {
          this.setState({ 
              title: '', 
              description: '', 
              url: '', 
              images: '', 
              message: res.message 
          });
          socket.emit('newPost', res.post);
        }
      });
  }

更新

在这个帖子上的一些帮助下,我设法使用我现有的路线和 Postman 上传了图像。当我使用我的表单测试路由时,我仍然得到一个空的req.file,并且没有上传。

我在我的设置中添加了快速多部分文件解析器,我认为这使我离修复这个问题更近了一步。

服务器端

这是我添加到我的server.js中的内容

import { fileParser } from 'express-multipart-file-parser';
 app.use(fileParser({
  rawBodyOptions: {
      limit: '15mb',  //file size limit
  },
  busboyOptions: {
      limits: {
         fields: 20   //Number text fields allowed 
      }
  },
 }));
pxiryf3j

pxiryf3j1#

要正确填充req.files,您需要按如下方式使用formdata.append

images.forEach(image => {
  formdata.append('images', image);
})
i2loujxw

i2loujxw2#

谢谢你所有的帮助。我设法把它修好了。原来我是将FileList对象连接到我所在状态下的数组,所以结构完全错误,在服务器上完全失败。我的照片现在可以完美上传了。

如果我发布了我的React部分,我相信你们中的任何人都会在一秒钟内注意到这一点,抱歉。我没有想到问题出在我的组件上。

问题

onFileLoad = (e) => {
  this.setState({
    images: this.state.images.concat(e.target.files)
  });
}

修复

onFileLoad = (e) => {
  this.setState({
   images: e.target.files
  });
}

submitMediaPOst = () => {
  const imageArr = Array.from(images);
  imageArr.forEach(image => {
    formdata.append('images', image);
  });
...
oogrdqng

oogrdqng3#

您缺少使用数组传递值的机会。

router.post('posts', upload.array('image', 10), function (req, res, next) {

})
uqzxnwby

uqzxnwby4#

对于这个问题,上传中间件后没有在控制器中获取req.file,而在 Postman 测试时,在单个属性中选择多个文件,当然在前端循环中附加这些文件

doc.forEach(file=> {
  formdata.append('file', file);
}

相关问题