将canvas.toDataURL()作为FormData发送

时间:2018-01-10 20:23:19

标签: javascript reactjs multipartform-data multer

我正在尝试使用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的项目是文件,而不是文本字段。但我无法弄清楚如何做到这一点。我尝试使用附加三个参数,我尝试将imgData转换为如下所示的blob:

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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