Node.js 将PDF文件上载到Express server

我已经建立了一个基本的浏览器表单，允许用户上传PDF文件。然后我想将该文件发送到Express后端。看起来这应该是一个相当基本的动作，但我不熟悉端到端的过程，所以我不确定哪一个部分失败了。我已经搜索了许多SO问题/答案，但没有找到任何提供完整解决方案的，我也无法拼凑出一个解决方案

更新：文件似乎正在进入服务器，但编码混乱。我猜

FileReader.readAsText

是错误的方法

FileReader.readAsBinaryString

让我更接近了一点，但仍然不太正确（而且它已被弃用）

FileReader.readAsArrayBuffer

似乎是一种潜在的方法，但我不确定如何在Express中正确处理缓冲区

客户端/浏览器

表单内置于React中，只对输入本身使用

onChange

处理程序。添加文件后，处理程序读取该文件，将其添加到表单数据中，并将post请求发送到服务器

// React form
<input
  name="upload"
  onChange={this._handleUpload}
  type="file"
/>

_handleUpload = (e) => {
  const { files, name } = e.target;

  // Read the file
  const reader = new FileReader();
  reader.onload = (e) => {
    const file = e.target.result;

    // Now that we have the file's contents, append to the form data.
    const formData = new FormData();
    formData.append('file', file);
    formData.append('type', name);

    axios
      .post('/upload', formData)
      .then(res => {
        // Handle the response...
      })
      .catch(err => console.log(err));
  };

  // Reading as text. Should this be something else?
  reader.readAsText(files[0]);
}

中间件

最后，我有自己的中间件，可以从multer获取文件。我只是通过将收到的文件写入磁盘来测试这篇文章。它有内容，但不是可读的PDF文件

const handleUpload = (req, res, next) => {
  // The file shows up on req.body instead of req.file, per multer docs.
  const { file } = req.body;

  // File is written, but it's not a readable PDF.
  const tmp = fs.writeFileSync(
    path.join(__dirname, './test.pdf'),
    file,
  );
}

---

这里有没有我明显弄错的地方？PDF文件是否需要以特殊方式处理？关于调试的重点，有什么建议吗？

看看这是否解决了您的问题。

_handleUpload = (e) => {
    const dataForm = new FormData();
    dataForm.append('file', e.target.files[0]);  
      axios
        .post('http://localhost:4000/test', dataForm)
        .then(res => {

        })
        .catch(err => console.log(err));      
}

render() {
  return (
    <div className="App">
      <input
      onChange={this._handleUpload}
      type="file"
      />    
    </div>
  )
}

---

无需发送文件类型，multer会为您标识名称和类型。

multer会将文件添加到req.file（单个）或req.files（任意）中。Ex

console.log（req.files）或const{files}=req正文仅供文本使用。@AndersonMendes:我理解，但我是说他们没有出现在那里。它们实际上是在
req.body
上找到的。好的，我会测试，然后回来。嗨@ericgio。您能告诉我如何将保存的文件从node下载到ReactJS吗？是的，谢谢！我错误地认为我需要在发送之前读取客户端上的文件（使用
FileReader
），但事实证明multer会在另一端处理所有这些。Hi@justcase。您能告诉我如何将保存的文件从node下载到reactjs吗
_handleUpload = (e) => {
    const dataForm = new FormData();
    dataForm.append('file', e.target.files[0]);  
      axios
        .post('http://localhost:4000/test', dataForm)
        .then(res => {

        })
        .catch(err => console.log(err));      
}

render() {
  return (
    <div className="App">
      <input
      onChange={this._handleUpload}
      type="file"
      />    
    </div>
  )
}

router.post('/test', upload.any(), (req, res) => {
    console.log(req.files)
    res.send({sucess: true})
})