Question

我建立了一个基本的浏览器表单，允许用户上传PDF文件。然后，我想将该文件发送到Express后端。看来这应该是一个非常基本的动作，但是我不熟悉端到端的流程，因此我不确定哪一块失败了。我已经搜索了许多SO问题/答案，但是没有找到能够提供完整解决方案的问题，而且我也无法将解决方案拼凑在一起。

更新：文件似乎正在到达服务器，但是编码混乱了。我的猜测是FileReader.readAsText是错误的使用方法。 FileReader.readAsBinaryString使我更加接近，但仍然不太正确（不建议使用）。 FileReader.readAsArrayBuffer似乎是可行的方法，但是我不确定如何正确处理Express中的缓冲区。

客户端/浏览器

该表单内置于React中，仅在输入本身上使用onChange处理程序。添加文件后，处理程序将读取文件，将其添加到表单数据中，然后将发布请求发送到服务器。

// 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]);
}

Express App

Express应用程序使用multer中间件来处理上传：

const app = express();
const upload = multer({});

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());
app.post('/upload', upload.any(), handleUpload);

中间件

最后，我有我自己的中间件，该中间件从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？有什么技巧可以将调试重点放在哪里？

Answer 1

看看是否可以解决您的问题。

_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})
})

无需发送文件类型，该筛选器会为您标识名称和类型。

将PDF文件上传到Express服务器

1 个答案: