ExpressJS - 如何从前端文件上传FileReader传过来的writeFile

编程问答 2022-05-29

问题描述

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

我在 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 等。我错过了什么？

解决方法

终于明白了。事实证明，在解码为 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!')
})
expressexpressexpressfile-uploadfilereaderjavascriptwritefile