时间戳

首页 > 解决方案 > Node.js Multer req.file 未定义

node.js - Node.js Multer req.file 未定义

问题描述

我尝试将图像从客户端（在反应中制作）发送到服务器（在 nodeJs 中制作），以便稍后将其上传到谷歌云存储。

但是 - 当我收到服务器 req.file 上的调用时，它是未定义的。（我确实有 req.files.file 但我使用 multer 我应该定义 req.file 。）

我将发布代码：

正面：

          <input
            accept='image/*'
            className='ProfilePage__uploadImage'
            onChange={onFileUploadChange()}
            ref={inputFile}
            name='file'
            id='file'
            type='file'
          />

onFileUploadChange 函数：

const onFileUploadChange = () => (event: React.ChangeEvent<HTMLInputElement>) => {
    const image = event?.target?.files?.[0]

    if (image !== undefined) {
      const data = new FormData()
      data.append('file', image)
      axios.post('http://localhost:3006/users/uploadProfileImage', data, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }
  }

Node.js 服务器：

const multer = Multer({
  storage: Multer.MemoryStorage,
  limits: {
    fileSize: 1000000, // Maximum file size is 10MB
  }
})

usersRouter.post(
  '/uploadProfileImage',
  multer.single('file'),
  (req, res, next) => {
    // here it crushes - cannot read originalname of undefined.
    const newFileName = req.file.originalname
    const blob = bucket.file(newFileName)
    const blobStream = blob.createWriteStream()
    blobStream.on('error', (err) => console.log(err))
    blobStream.on('finish', () => {
      console.log('done')
    })
    blobStream.end(req.file.buffer)
  })

标签： node.jsreactjsaxiosmulter

解决方案

我才发现一直以来的错误是什么......

  • 首先，我设法使用 req.files.file 将文件发送到 GCS

但是当我想查看它已损坏的文件时..所以我认为我需要按照教程所说的那样去做..（在他们的示例中是req.file）因此我很努力，所以它与示例相同。

但这个问题根本与它无关。

问题是 GCL 需要我为每张图片提供一个令牌。

    const newFileName = req.files.file.name
    const blob = bucket.file(newFileName)
    const blobStream = blob.createWriteStream({
      metadata: {
        metadata: {
          firebaseStorageDownloadTokens: uuid,
        }
      }
    })

现在一切都按预期工作:)

感谢所有帮助过的人。

推荐阅读