我尝试将图像从客户端(react中制作)发送到服务器(nodejs中制作),以便稍后将其上传到谷歌云存储。
然而,当我在服务器上收到调用时,req.file是udnefined(我确实有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)
})
1条答案
按热度按时间eqoofvh91#
我刚刚发现了一直以来的错误。。。
首先,我设法使用req.files.file将文件发送到地面军事系统
但当我想查看文件时,它已损坏。。所以我想我需要按照教程上说的那样做(在他们的示例中,它是req.file),因此我很难处理它,所以它与示例相同。
但这个问题与此毫无关系。
问题是gcl需要我为每张图片提供一个标记。
现在一切正常:)
感谢所有帮助过我的人。