如何从FileReader上传(pdf)文件到nodejsExpress应用程序

Question

我有一个(React(js应用程序，它使用FileReader读取PDF文件，然后使用fetch将其发送到运行Express的节点js服务器。但是，当在服务器端接收到请求时，请求正文是未定义。我的代码中缺少什么才能使其工作？

客户端：

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