vue + echarts 生成图片并上传到服务器

//生成柱状图

import * as echarts from "echarts"

var myTopChart = echarts.init(document.getElementById(id));

myTopChart.setOption(runTopOption)

//获取图片的base64传递后台，生成图片，供导出报表使用

var picBase64Info = myTopChart.getDataURL("png");

 let file = this.base64ToFile(picBase64Info, 'img')//图片的文字

  let formData = new FormData()

  formData.append('file', file)    

  axios.post('/upload/upload', formData, {

        headers: {

           'Content-Type': 'multipart/form-data'

            }

      }).then(res => {

         console.log(index,res)

}）

base64ToFile(base64, fileName) {

      // 将base64文件流按照 , 分割前缀与后续内容

      let data = base64.split(',')

      // 获取文件格式（image/png、image/jpeg、image/webp等）

      let fileType = data[0].match(/:(.*?);/)[1]

      // 获取后缀（png、jpeg、webp）

      let suffix = fileType.split('/')[1]

      // 使用atob()对base64数据进行解码 返回文件数据流

      const bstr = window.atob(data[1])

      // 获取解码后  文件数据流的长度

      let n = bstr.length

      // 根据解码后数据流的长度创建一个等长的整形数字数组

      // 但在创建时 所有元素初始值都为 0

      const u8arr = new Uint8Array(n)

      // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元

      while (n--) {

        // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元

        u8arr[n] = bstr.charCodeAt(n)

      }

      // 创建File文件对象

      // new File(bits, name, options)

      const file = new File([u8arr], `${fileName}.${suffix}`, {

        type: fileType

      })

      // 将返回File文件对象

      return file

    },