ExpressJS - 如何从前端文件上传FileReader传来writeFile答案

【问题标题】：ExpressJS - how to writeFile passed from the front-end file upload FileReaderExpressJS - 如何从前端文件上传FileReader传来writeFile
【发布时间】：2021-04-22 23:29:26
【问题描述】：

我发现了很多关于这个主题的帖子，但经过多次调整后仍然无法让文件上传正常工作。

我有一个在 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() 对其进行编码，并在背面对其进行手动解码，尝试使用 Buffer 等。我错过了什么？

【问题讨论】：

标签： javascript express file-upload filereader writefile

【解决方案1】：

终于明白了。事实证明，在解码为 base64 字符串之前，data:datatype; 部分需要使用正则表达式从该字符串中提取出来。

基于this post，我在后端添加了更多逻辑，现在它可以工作了！

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!')
})

【讨论】：