echarts图片文件封装formData上传到后端接口

ECharts生成的图片通常是SVG格式，如果你想将其作为FormData上传到后端服务器，首先你需要将SVG转成Base64格式的数据。以下是一个简单的步骤：

1. **获取SVG数据**:
使用JavaScript的`echarts.getInstanceByDom`方法获取图表实例，然后通过`.getSVG()`获取SVG字符串。

var chart = echarts.getInstanceByDom(document.getElementById('your-chart-id'));
var svgData = chart.getSVG();

2. **转换为Base64**:
将SVG字符串转化为Blob对象，再转换为Base64编码。

function dataURLtoBlob(dataUrl) {
  // 数据URL解码为ArrayBuffer
  var arr = atob(dataUrl.split(',')[1]);
  // ArrayBuffer转二进制数组
  var buf = new Uint8Array(arr.length);
  for (var i = 0; i < arr.length; i++) {
    buf[i] = arr.charCodeAt(i);
  }
  // 创建并返回Blob对象
  return new Blob([buf], { type: 'image/svg+xml;charset=utf-8' });
}

var blob = dataURLtoBlob(svgData);
var base64Data = URL.createObjectURL(blob);

3. **构造FormData**:
将Base64数据添加到FormData对象，通常用于表单上传。

var formData = new FormData();
formData.append('chartImage', base64Data, 'chart.svg'); // 图片名称和文件名可以自定义

4. **发送POST请求**:
最后，你可以使用XMLHttpRequest、fetch API或者其他库（如axios）来发送POST请求，将FormData传递给后端接口。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/your-backend-url');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功');
  } else {
    console.error('上传失败');
  }
};
xhr.send(formData);