将 canvas.toDataURL() 作为 FormData 发送

Question

我正在尝试使用 html2canvas 将 DOM 元素呈现为 .png 图像，然后我想将其上传到服务器。这是我的代码：

import React, { Component, PropTypes } from 'react';
import html2canvas from 'html2canvas';
import axios from 'axios';


const sendScreenshot = (img) => {
  const config = {
      headers: {
          'content-type': 'multipart/form-data'
      }
  }
  let data = new FormData();
  data.append('screenshot', img);      
  return axios.post('/api/upload', data)
}

export default class Export extends Component {

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input).then(canvas => {
      document.body.appendChild(canvas);
      const imgData = canvas.toDataURL('image/png');
      sendScreenshot(imgData)
    });
  }

  ...

我可以看到 DOM 元素正在正确地转换为图像，因为我可以看到它附加到页面上。

在 node.js 服务器端，我可以看到表单正在通过，但“屏幕截图”是作为文本字段而不是文件接收的。我正在使用 multer，并且我确认我可以正确接收和保存文件上传，至少在我使用 Postman 时是这样。

所以我想基本问题是我需要指出我附加到 FormData 的项目是一个文件，而不是一个文本字段。但我不知道该怎么做。我尝试将 append 与三个参数一起使用，并尝试将 imgData 转换为如下所示的 blob：

const blob = new Blob([img], {type: 'image/png'});

但结果并没有让我更接近我想要的。

Answer 1

要在 POST 请求中发送二进制数据，您需要使用 Blob。 Blob 表示原始二进制数据。要获取画布的 Blob，可以使用 toBlob 方法。

获得 Blob 实例后，您可以使用 append 方法将 Blob 添加到 FormData。 append 方法接受 Blob 实例作为第二个参数。您甚至可以将可选的第三个参数传递给 append 以指定要与 Blob 一起发送到服务器的文件名。

blob 将作为文件数据在服务器上接收。

一个实际的例子：

const canvas = document.getElementById('my-canvas');
canvas.toBlob(function(blob) {
  const formData = new FormData();
  formData.append('my-file', blob, 'filename.png');

  // Post via axios or other transport method
  axios.post('/api/upload', formData);
});