tinyMCE复制图片上传

知识点： readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL 格式的字符串（base64 编码）以表示所读取文件的内容。

editor.on('paste', function (e) {
  // 业务逻辑是单张图片的上传，所以取的1
  const file = e.clipboardData.files[0];
  
  if (file) {
    const reader = new FileReader();
    
    reader.readAsDataURL(file);
    // 监听读取完成
    reader.onload = async function (e: any) {
      const src = e.target.result;
      const blob = base64ToBlob(src);
      const data = new FormData();
      data.append('file', blob, 'why.png');
      // uploadImg 自定义的一个图片上传的方法
      const { url } = await uploadImg(data);
      editor.execCommand('mceInsertContent', false, `<img src="${url}" />`);
    };
  }
});

function base64ToBlob(base64Buf) {
  const arr = base64Buf.split(",");
  const typeItem = arr[0];
  const mime = typeItem.match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}