JavaScript如何将图片转Base64结果转为可API POST提交的字符串

你的代码转换逻辑本身没有语法错误，拿不到字符串类型结果是两个基础认知偏差导致的：

• toDataURL是返回Promise的异步函数，如果你在then回调的外部同步读取函数返回值，拿到的永远是Promise实例，不可能拿到最终的Base64字符串。所有用到转换结果的逻辑，必须写在then回调里，或者通过await等待Promise resolve之后再执行。
• 你在then回调中拿到的reader.result本身就是标准字符串类型，只是它是完整的Data URI格式，固定以data:[文件MIME类型];base64,开头。如果你的业务接口要求传入不带前缀的纯Base64编码内容，直接传完整Data URI会被判定为格式错误，很容易被误以为“没有拿到正确的字符串”。

先验证现有逻辑的返回值类型：

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => {
    // 此处打印类型必然为 string
    console.log('返回值类型：', typeof dataUrl)
    // 截取前缀拿到纯Base64字符串，适配普通接口要求
    const pureBase64Str = dataUrl.split(',')[1]
    // 所有POST提交逻辑必须写在这个回调内部执行，不要把dataUrl拿到外面用
    // 提交示例：
    // fetch('/your/api/path', {
    //   method: 'POST',
    //   headers: {'Content-Type': 'application/json'},
    //   body: JSON.stringify({img: pureBase64Str})
    // })
  })

如果习惯用同步写法写异步逻辑，可以用async/await改造，注意await必须放在async函数内部：

async function submitImage(imgUrl) {
  const fullDataUrl = await toDataURL(imgUrl)
  const pureBase64 = fullDataUrl.split(',')[1]
  // 发起POST请求
  const res = await fetch('/your/upload/api', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({image_base64: pureBase64})
  })
  return res.json()
}

// 调用方法
submitImage('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')

• 确保请求的图片服务端配置了CORS跨域允许规则，否则fetch请求会被浏览器跨域策略拦截，无法正常读取blob内容
• 若接口支持传完整Data URI，可以不用截取前缀，直接传dataUrl即可，具体看接口文档要求

内容的提问来源于stack exchange，提问作者joyanader