Node.js通过API解码Base64图片并保存时文件损坏问题求助

嘿，我一眼就看出问题出在哪了！当你用GET请求传递Data URI的时候，浏览器会自动对Base64字符串里的特殊字符（比如+、/、=）做URL编码，但你的代码直接拿了编码后的字符串就去处理，结果写入的Base64内容根本不对，图片自然就损坏啦。

问题分析 #

举个实际的例子：原本Base64里的+会被浏览器转成%2B，/转成%2F，=转成%3D。你直接拆分这个编码后的字符串，得到的是被篡改过的Base64内容，用它生成的文件肯定打不开。

修复方案 #

只需要在拿到请求参数后，先用decodeURIComponent()把编码后的字符串解码回原始的Base64格式，再进行后续处理就行。另外我还帮你加上了基础的错误处理，避免程序因为异常崩溃，也方便调试问题。

修改后的代码如下：

const express = require('express');
const fs = require('fs');
const app = express();

app.listen(3000, () => {
  console.log('Running on port 3000...');
});

app.get('/api/users', function(req, res) {
  try {
    // 先对请求参数进行URL解码，还原原始Base64内容
    let base64String = decodeURIComponent(req.param('datauri'));
    
    // 提前验证Data URI格式是否正确
    if (!base64String.includes(';base64,')) {
      return res.status(400).send('Invalid Data URI format');
    }
    
    let base64Image = base64String.split(';base64,').pop();
    
    fs.writeFile('image.png', base64Image, {encoding: 'base64'}, function(err) {
      if (err) {
        console.error('Failed to save file:', err);
        return res.status(500).send('Failed to save image');
      }
      console.log('File created successfully');
      res.send('Image saved successfully');
    });
  } catch (err) {
    console.error('Error processing request:', err);
    res.status(400).send('Invalid request data');
  }
});

额外建议 #

• GET请求长度限制：如果你的图片比较大，GET请求的URL长度可能会超过浏览器或服务器的限制，导致参数被截断。这种情况下建议改用POST请求，把Data URI放在请求体里传递，会更稳定可靠。
• 参数校验：最好在处理前多做几层格式校验，比如判断Data URI是否包含正确的前缀（data:image/png;base64,这类），避免因为无效参数导致程序出错。

内容的提问来源于stack exchange，提问作者Rob