如何正确POST Blob至Express服务器并验证服务器可访问该Blob？

首先咱们得搞清楚为啥你的服务器拿不到Blob数据：你当前用的body-parser只能处理application/json和application/x-www-form-urlencoded类型的请求，而直接发送Blob时，请求的Content-Type会是multipart/form-data（浏览器自动设置），这种格式body-parser完全处理不了。另外，直接传Blob也不是标准的文件上传方式，得用FormData来包装它才行。

下面是具体的修复步骤：

1. 修改客户端代码：用FormData包装Blob #

把客户端代码改成这样，用FormData承载Blob数据，浏览器会自动生成正确的请求头：

function setImage() {
  html2canvas(document.querySelector('#chart')).then(canvas => {
    canvas.toBlob(function(blob) {
      const url = 'http://localhost:3000/api/v1/pdf';
      // 创建FormData对象并添加Blob，第三个参数是可选文件名
      const formData = new FormData();
      formData.append('chartImage', blob, 'chart.jpg');

      fetch(url, {
        method: 'POST',
        body: formData // 无需手动设置Content-Type，FormData会自动处理
      })
      .then(response => response.json())
      .then(success => console.log(success))
      .catch(error => console.log(error));
      
      console.log(blob);
      document.body.appendChild(canvas);
    }, 'image/jpeg', 1);
  });
}

注意：千万别手动设置Content-Type: application/json，这会和你发送的FormData格式不匹配，导致服务器无法解析。

2. 服务器端安装并配置multer中间件 #

body-parser处理不了文件上传，咱们需要用multer这个专门处理multipart/form-data的中间件：

首先安装multer：

npm install multer --save

然后修改服务器端代码，配置multer接收上传的文件：

const multer = require('multer');
// 用内存存储（适合小体积的图表图片），也可以配置存储到磁盘
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

router.post('/', upload.single('chartImage'), (req, res, next) => {
  // req.file就是上传的Blob数据，包含buffer、文件名、大小等信息
  console.log('上传的文件信息：', req.file);
  // 若要获取二进制数据，直接用req.file.buffer即可
  res.json({ message: '图片上传成功', fileSize: req.file.size });
});

这里upload.single('chartImage')里的chartImage，要和客户端FormData里的key（formData.append('chartImage', ...)的第一个参数）完全对应。

3. 验证服务器是否能访问Blob #

现在测试一下：

• 调用setImage()发起请求
• 服务器端的console.log会输出上传的文件详情，包括buffer、文件名、大小等
• 如果需要把图片保存到磁盘，可以用fs.writeFile写入req.file.buffer：

const fs = require('fs');
fs.writeFile('./uploads/chart.jpg', req.file.buffer, (err) => {
  if (err) throw err;
  console.log('图片已保存到本地');
});

为啥之前的方法不行？ #

• 直接发送Blob：浏览器会把请求Content-Type设为application/octet-stream，但body-parser不处理这种类型，所以req.body为空
• 用JSON.stringify(blob)：Blob对象无法被JSON序列化，转出来的是{}，服务器自然拿不到有效数据
• 设置Content-Type: application/json：这和Blob/FormData的格式完全不匹配，服务器无法解析，req.body还是空

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