如何用JavaScript通过GitHub API将Base64 Data URL存为WebP图片

我有一个WebP图片的Base64 Data URL：data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=，想要通过GitHub API把它以WebP图片格式提交到仓库，并且能像仓库里的PNG图片那样直接预览。但目前提交后的WebP文件只能看到文件本身，无法正常预览。

我参考了两个Stack Overflow的解决方案，理论上应该可行，但测试后都没达到预期效果。我使用的是ofetch（JavaScript的fetch封装库），它处理JSON文件没问题，但我推测需要把数据转换成合适的格式才能正确提交。

当前使用的代码 #

import { ofetch } from 'ofetch';

const path = 'random_name.webp';
const message = 'random commit message';
const data = `data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=`;
const content = data.replace(/^data:image\/\w+;base64,/, '');

await ofetch(`/repos/learntheropes/img-test/contents/${path}`, {
  method: 'PUT',
  baseURL: 'https://api.github.com',
  headers: {
    'Content-Type': 'application/vnd.github.v3+json',
    Authorization: `token OMITTED`
  },
  body: {
    message,
    content
  },
  async onRequestError({ request, error }) {
    console.log('[fetch request error]', request, error);
  },
  async onResponseError({ request, response }) {
    console.log('[fetch response error]', request, response.status, response.body);
  }
})

尝试过的Blob转换方案（请求被拒绝） #

const dataURLtoBlob = (data) => {
  const arr = data.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], {
    type:mime
  });
}

const content = dataURLtoBlob(data);

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