如何將 (pdf) 文件從 FileReader 上傳到 node js Express 應用程序

Question

我有一個 (React) js 應用程序，它使用FileReader讀取 PDF 文件，然后使用fetch將其發送到運行 Express 的節點 js 服務器。 但是，當服務器端收到請求時，請求正文是undefined 。 我的代碼中缺少什么才能使其正常工作？

客戶端：

function readFile() {
    let file = fileInputRef.current.files[0];
    const reader = new FileReader();
    return new Promise((resolve) => {         
      reader.onload = function (e) {
        resolve(e.target.result);
      };
      reader.readAsDataURL(file);//readAsDataURL, readAsArrayBuffer, or readAsBinaryString?
    });
  }

function handleSubmit(event) {
    event.preventDefault();    
readFile().then((value) => {
  fetch('/gen/file', {
    method: 'POST',
    body: value
  })
});

服務器端：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser')
const app = express();
const jsonParser = bodyParser.json()
const port = 3000;

app.post("/gen/file",  function (req, res, next) {
  console.log(req.body);//undefined - Why????
});
app.listen(port, function (err) {
  if (err) console.log(err);
});

Answer 1

客戶端：

function getBase64(file,callback){
   const reader = new FileReader();
   reader.addEventListener('load',()=> callback(reader.result));
   reader.readAsDataURL(file);
}
function handleSubmit(event) {
    event.preventDefault();  
    let body = {};
    getBase64(file,fileUrl=>{
      body.file = fileUrl;
      fetch('/gen/file', {
       method: 'POST',
       body
      })
    })

服務器端：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser')
const app = express();
const jsonParser = bodyParser.json()
const port = 3000;
const fs = require('fs');

app.post("/gen/file",  function (req, res, next) {
   console.log(req.body);//undefined - Why????
   let file =  req.body.file;
   let base64 =  file.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
   var buffer = new Buffer.from(base64[2],'base64');
   fs.writeFile(__dirname+"/out.jpeg", buffer, 'base64', function (err) {
      console.log(err);
     });
 });