data-属性不会随表单提交，因其仅存在于前端DOM，浏览器只序列化name属性控件值；正确做法是显式将ID写入隐藏域、FormData或同级input中。
不能直接用 data- 存附件 ID 并指望后端自动读取——它只在前端 DOM 里，不随表单提交，也不进请求体。
为什么 form 提交时 data-attachment-id 消失了
HTML 表单提交（包括 <form> 默认提交、fetch() 或 FormData.append()）根本不会收集任何 data- 属性。浏览器只序列化 name 属性存在的控件值（如 <input name="file">）、value、checked 状态等。data-* 是纯前端元数据，和服务端零耦合。
- 常见错误：给上传按钮加
data-attachment-id="1024"，然后以为点击后后端能拿到这个 ID - 真实结果：后端收到空或 undefined，因为没发过去
- 更隐蔽的坑：用
FormData手动构造时漏掉append("attachment_id", "1024")，只靠 DOM 属性“以为已传”
正确传递附件 ID 的三种实操路径
必须显式把 ID 塞进请求载荷，而不是依赖 DOM 属性“自动同步”：
- 方案一（推荐）：上传成功后，服务端返回完整附件对象（含
id、url），前端存到 JS 变量或Map，后续提交时从变量取值填入隐藏域：<input type="hidden" name="attachment_id" value="1024"> - 方案二：上传前就生成临时 ID（如 UUID），用
data-temp-id标记 DOM 元素便于 UI 关联，但真正提交时仍要通过FormData.append("attachment_id", tempId)显式传 - 方案三：若需多文件批量上传，每个
<input type="file">旁配一个同级<input type="hidden" name="attachment_ids[]">，JS 在上传回调里填值，确保顺序和文件一一对应
data- 在附件流程里唯一靠谱的用途
它只适合做「前端视图层绑定」，比如标记哪个预览图对应哪个附件、控制删除按钮状态，但绝不参与数据流转：
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法用法：
<div class="preview" data-attachment-id="1024"><button onclick="deleteAttachment(this)">删</button></div>—— 点击时用this.closest("[data-attachment-id]").dataset.attachmentId拿 ID 发删除请求 - ❌ 危险用法：
<input type="file" data-attachment-id="1024">并幻想提交时这个 ID 会自动带上 - 注意：删除操作是独立请求，此时
data-attachment-id才真正被 JS 主动读取并用于构造 URL 或 body，这是它该出现的上下文
附件 ID 的生命周期必须由 JS 显式管理——从生成、暂存、关联 DOM、到最终提交或删除，data- 只是贴在元素上的便签纸，不是数据库连接池。
