上传文件后端express和前端react使用multer缺少流属性

Question

我试图成功上传一个文件(图像(，但出现了问题，因为该文件似乎被移动到了正确的目录，但它的大小为0，就好像它实际上没有任何内容，当我试图打开它时……它失败了。我想我可能错过了"；流"；因为当我在后端控制台.log文件时，没有流属性。。并且我在控制台中也得到一个错误，说"；"；源"；参数的类型必须是函数或Stream、Iterable或AsyncIterable的实例。接收未定义的"；

我的前端：

const UploadPoster = ({books_id}) => {
const [file, setFile] = useState();

const send = () => {
const data = new FormData();
data.append('file', file);
Axios.post(`${HOST}/books/${books_id}/upload`, data, {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
},
})
.then(res => console.log(res))
.catch(err => console.log(err));

history.go(0)
};
const history = useHistory();

return (
<>
<form action="#">
<div className="flex">
<label htmlFor="file">Update book cover:</label>
<input type="file" id="file" onChange={event => {
const file = event.target.files[0];
setFile(file);
}} />
</div>
</form>
<Button onClick={send}>Upload</Button>
</>
)
}

我的后端：

.post('/:id/upload', authMiddleware, loggedUserGuard, roleMiddleware(userRole.Admin), upload.single('file'), async (req, res) => {
const {file} = req;
await pipeline(
file.stream,
fs.createWriteStream(`${__dirname}/../../../front_end/public/posters/${req.file.originalname}`),
);
res.send('File uploaded as ' + req.file.originalname);
})

Answer 1

您需要将要发送的图像文件附加到JSON请求主体。

你可以在这里参考这篇文章：

Javascript：上传文件