ExpressJS -如何写文件从前端传入的文件上传FileReader

Question

我发现了很多关于这个话题的帖子，但是经过很多调整仍然不能让文件上传正常工作。

我在React中有一个PDF文件上传的表单，像这样:

<Input
onChange={(e) => this.handleFileUpload(e)}
required
type="file"
name="resume"
id="resume"
/>
handleFileUpload = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", (upload) => {
this.setState({
resumeFile: upload.target.result,
});
});
if(file) {
reader.readAsDataURL(file)
}
}
axios.post("/api/career", {resumeFile: formData.resumeFile})

在快速服务器端，我试图解码这个文件并保存它。

const base64url = require('base64url');
router.post('/api/career', (req, res) => {
fs.writeFile('file.pdf',base64url.decode(req.body.resumeFile), (err) => {
if (err) throw err;
console.log('The file has been saved!')
})
}

但是保存的文件已经损坏，无法打开。要么是我编码或解码错了，要么是别的什么。我试图在前端用btoa()编码，以及在背面手动解码，尝试使用缓冲区等。我错过了什么?

Answer 1

终于想通了。事实证明，在解码为base64字符串之前，需要使用regex从该字符串中提取data:datatype;部分。

基于这篇文章，我添加了一些更多的逻辑到我的后端，它现在工作!

function decodedBase64File(dataString) {
var matches = dataString.match(/^data:([A-Za-z-+/]+);base64,(.+)$/),
response = {};

if (matches.length !== 3) {
return new Error('Invalid input string');
}

response.type = matches[1];
response.data = Buffer.from(matches[2], 'base64');

return response;
}

var decodedResumeFile = decodedBase64File(resumeFile);
fs.writeFile(resume,decodedResumeFile.data, (err) => {
if (err) throw err;
console.log('The file has been saved!')
})