node.js - req.file 的 console.log 上 req.file 的值未定义的错误

Question

这是我声明的 multer 常量以及用于上传图像的路线

    let storage = multer.diskStorage({

  destination: (req, file, cb) => {
          cb(null, `server/uploads/events/${req.params.group}/${req.params.name}`);
  },
  filename: (req, file, cb) => {
      cb(null, `${Date.now()}_${file.originalname}`);
  },
  fileFilter: (req, file, cb) => {
      const ext = path.extname(file.originalname)
      if (ext !== '.jpg' && ext !== '.png' && ext !== '.mp4') {
          return cb(res.status(400).end('only jpg, png, mp4 is allowed'), false);
      }
      cb(null, true)
  }
});

const upload = multer({ storage: storage }).single("file");


router.post("/uploadfiles/:group/:name", (req, res) => {


  upload(req, res, async (err) => {
      console.log(req.file);
      await fs.closeSync(fs.openSync(res.req.file.path + '/' + res.req.filename, 'w'))
      if (err) {
        console.log(err)
          return res.json({ success: false, err });
      }else{
        console.log(req.file)
        return res.json({ success: true, url: res.req.file.path, fileName: res.req.file.filename });

      }
  });
});

这是我的前端文件，其中定义了 axios 请求

onImageChange= e=>{
    const image = e.target.files[0]
    const reader = new FileReader();
    reader.onload = () =>
    {
      this.setState({
        imagesrc:reader.result,
        selectedImage:image,
        filename:image.name
       })
    }
   reader.readAsDataURL(e.target.files[0]);
   const formData = new FormData()
   const file = e.target.files[0]
   formData.append('file',file)
   for (var key of formData.entries()) {
     console.log(key[0] + ', ' + key[1]);
 }

   axios({
     method: 'post',
     url: `http://localhost:5000/api/groups/events/uploadfiles/${this.props.auth.group.id}/${this.state.name}`,
     data: formData
    }).then(response=>{
     if (response) {
         console.log(this.state.selectedImage);
     }
 })
  }

这里我将 selectedImage 定义为初始状态下的空数组。 这是在我的返回组件内，我在其中调用了表单

<form noValidate onSubmit={this.onSubmit} autoComplete="off" className="eventspopupinner" encType="multipart/form-data">
      <div className="imagecontainer">
      <input accept="image/*" className='input' id="icon-button-file" type="file" name="file"  onChange={this.onImageChange} style={{display:'none'}}/>

Answer 1

需要存在上传文件夹才能允许 multer 在那里保存图像