富文本编辑器里多个data:image图片上传

批量上传富文本编辑器中的多个 data:image 图片，一般需要以下步骤：

提取 Data URI： 从富文本编辑器中获取内容，并提取所有的 data:image 图片的 Data URI。这可能需要使用正则表达式或其他方法来解析 HTML 并提取图像的 Data URI。

上传图片： 将提取的 Data URI 图片进行上传。你可以将这些 Data URI 转换为 Blob 或 File 对象，并将它们作为文件发送到服务器端。

下面是一个伪代码示例：

// 假设你有一个变量 content 包含了富文本编辑器中的内容
const content = `
  <div>
    <img src="data:image/jpeg;base64,..."> <!-- 图像1 -->
    <img src="data:image/png;base64,..."> <!-- 图像2 -->
    <!-- 更多图片 -->
  </div>
`;

// 使用正则表达式提取所有的 Data URI
const regex = /src="(data:image\/[^;]+;base64,([^"]*))"/g;
let match;
const images = [];

while ((match = regex.exec(content)) !== null) {
  images.push({
    dataUri: match[1], // 图片的 Data URI
    base64String: match[2] // base64 字符串
  });
}

// 将 Data URI 转换为 Blob 或 File 对象
const blobImages = images.map(img => {
  const byteCharacters = atob(img.base64String);
  const byteNumbers = new Array(byteCharacters.length);
  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: img.dataUri.split(';')[0].split(':')[1] });
  return blob;
});

// 使用 FormData 对象批量上传这些图片
const formData = new FormData();
blobImages.forEach((blob, index) => {
  formData.append(`image_${index}`, blob, `image_${index}.png`);
});

// 使用 fetch 或其他方法发送 FormData 到服务器
fetch('your-upload-url', {
  method: 'POST',
  body: formData
}).then(response => {
  // 处理上传的响应
});

这段代码是从富文本编辑器的内容中提取所有的 data:image 图片的 Data URI，然后将它们转换为 Blob 对象，并最终使用 FormData 对象批量上传到服务器。

在实际应用中，可能需要根据富文本编辑器的输出格式和上传需求来进行更详细的调整。同时，需要注意上传文件的大小和服务器端的处理能力。