怎么利用 FormData 对象实现 HTML 编辑器中图文数据的异步流式上传-html教程-PHP中文网

不能。formdata 不解析 html 或提取中的 base64/blobs，需手动提取转换后显式 append；base64 用 atob+uint8array+blob 转换，blob url 需 fetch 拉取，已上传图片应跳过，contenteditable 中需遍历替换为占位符并上传对应二进制数据。

怎么利用 formdata 对象实现 html 编辑器中图文数据的异步流式上传

FormData 能否直接上传富文本中的图片？

不能。FormData 本身不解析 HTML 或提取 <img> 标签里的 base64 或 blob，它只收你显式 append 的二进制数据。编辑器（如 TinyMCE、Quill、或者自研 contenteditable）里插入的图片，多数以 data:image/png;base64,... 或临时 Blob URL 形式存在，必须手动提取、转换、再 append 到 FormData。

常见错误现象：fetch 发出去后后端收不到文件字段，或只收到空字段——往往是因为只把整个 HTML 字符串塞进了 FormData，而没处理其中的图片资源。

base64 图片需用 atob() + Uint8Array + Blob 转成二进制
blob: URL 需用 URL.revokeObjectURL() 配合 fetch() 重新拉取原始 blob（注意跨域限制）
已上传过的图片（如带真实 URL 的 <img src="https://.../abc.jpg?x-oss-process=image/resize,p_40">）应跳过，避免重复上传

如何从 contenteditable 中提取并替换图片为占位符？

核心是遍历所有 <img>，识别待上传图片，生成唯一 ID 占位符（如 __IMG_123__），再把原图转成 blob 后 append 进 FormData。后续提交 HTML 时，用占位符替换回服务端返回的真实 URL。

示例逻辑：

const imgs = editorRef.querySelectorAll('img');
imgs.forEach((img, idx) => {
  const src = img.src;
  if (src.startsWith('data:image/') || src.startsWith('blob:')) {
    const placeholder = `__IMG_${Date.now()}_${idx}__`;
    img.src = placeholder; // 替换为占位符，防止提交时被当作普通 URL

    if (src.startsWith('data:image/')) {
      const byteString = atob(src.split(',')[1]);
      const mime = src.split(';')[0].split(':')[1].split('/')[0];
      const arrayBuffer = new ArrayBuffer(byteString.length);
      const uint8Array = new Uint8Array(arrayBuffer);
      for (let i = 0; i 
<p>关键点：<code>formData.append('images', blob, ...)</code> 的第三个参数（文件名）会影响后端解析；若后端依赖文件名推断类型，这里必须带扩展名。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
														src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
													<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

<h3>流式上传是否真能“边传边存”？</h3>
<p>浏览器原生 <code>fetch</code> 和 <code>XMLHttpRequest</code> 不支持真正的“边编辑边上传”，但可模拟流式：把图片分批 append 并逐个发起请求，或用单次请求携带多个 <code>blob</code> 字段（即多图同传）。所谓“流式”，本质是控制并发、失败重试、进度反馈，而非底层 HTTP 流。</p>

单次上传全部图片 + HTML：适合小图文（FormData 包含 html 字段和多个 images 字段
分图上传 + 服务端返回 URL 后实时替换占位符：适合大图或弱网，需维护上传队列和状态映射表（如 { __IMG_123__: 'https://cdn/xxx.jpg' }）
禁止在 formdata.append('html', innerHTML) 前修改 DOM，否则占位符可能被意外渲染或丢失

后端接收时为何总报 “Multipart parse error”？

多半是前端构造的 FormData 与后端 multipart 解析器不匹配。Node.js 的 multer、Python 的 Flask.request.files、PHP 的 $_FILES 都要求字段名严格对应，且图片字段必须是 type="file" 级别结构（即每个 append 对应一个独立文件项），不能把多个 blob 塞进同一个字段再试图拆解。

正确做法：

前端：每张图单独 formData.append('image', blob, name)，HTML 内容用 formData.append('content', htmlString)
后端：按字段名分别读取，例如 req.files.image 是数组（multer 配置 array('image')），而非 req.files.images
特别注意：Content-Type 头不要手动设置 —— 浏览器会自动添加带 boundary 的 multipart/form-data，手设反而破坏格式

容易被忽略的是：编辑器中图片可能来自剪贴板粘贴（触发 paste 事件），这时 event.clipboardData.items 返回的 File 对象可直接 append，无需 base64 解码，但需过滤非图像类型（item.type.startsWith('image/')）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！