开发过程中，遇到一个问题，canvas 处理了海报，需要默认直接上传到服务器，获取服务器放回的地址。

canvas 处理过的海报地址，其实是个base64字符串，需要将此地址转化成文件，才能上传至服务器。

//制作海报
function makePoster() {
    const canvas = document.getElementById("posterCanvas");  
    const context = canvas.getContext("2d");
    
    // ... 绘制海报的代码 ...
    
    const posterImage = canvas.toDataURL("image/png");
    dataURLtoFile(posterImage, "signature.png");
}

dataURLtoFile方法，将Base64字符串转成文件

/**
 * 将base64转换为文件
 * {string} dataurl 为base64字符串
 * {string} filename 为文件名（必须带后缀名，如.jpg,.png）
*/
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(","), //使用 split() 方法将 Data URL 字符串分成两部分，即 MIME 类型和数据部分，并将它们存储在数组 arr 中
      mime = arr[0].match(/:(.*?);/)[1], //使用正则表达式和 match() 方法从 MIME 类型部分中提取实际的 MIME 类型
      bstr = atob(arr[1]), //使用 atob() 方法将数据部分的 base64 编码解码为二进制字符串。
      n = bstr.length,
      u8arr = new Uint8Array(n); //创建一个长度为解码后字符串长度的 Uint8Array 数组 u8arr
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }//使用循环将解码后的二进制字符串转换为 Uint8Array
  this.fileList = new File([u8arr], filename, { type: mime }); //使用 File 构造函数创建一个 File 对象，传入转换后的 Uint8Array、文件名和 MIME 类型作为参数
  uploadPoster(this.fileList); //调用 uploadPoster 函数，并将转换后的 File 对象作为参数进行图片上传
}

异步上传。

    // 异步上传标题图
    function uploadPoster(poster) {
      formData = new FormData();
      formData.append("file", poster);
      $.ajax({
        url: "/resource/upload/images",
        type: "POST",
        data: formData,
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success: (result) => {
        },
      });
    }