使用multer缺少流属性上传文件后端快递和前端反应

Question

我正在尝试成功上传文件（图像），但出现问题，因为文件似乎已移动到正确的目录，但它的大小为 0，就好像它实际上没有任何内容一样，当我尝试打开它..它失败了。我想我可能缺少“流”，因为当我 console.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: Upload File