每行上传需独立控件与请求：name唯一（如config_123）、data-row-id标记归属、fetch+formdata单独发送、校验绑定具体行、后端按row_id精准更新。
直接在长表格每行放一个独立上传控件是可行的，但必须避免共用 name、共享 FormData 实例或触发全局表单提交——否则所有行会混传、覆盖或失败。
每行 <input type="file"> 必须有唯一 name 和绑定逻辑
浏览器靠 name 区分不同文件字段；如果多行都用 name="config"，后端收到的只会是最后一行选中的文件（或报错）。你得为每行生成唯一标识，比如结合行索引或业务 ID：
<input type="file" name="config_123" data-row-id="123">- 用
data-row-id或id属性标记归属，方便 JS 定位对应行的其他字段（如配置名、描述） - 不要用
name="config[]"——那是给“同一行多文件”用的，不是跨行隔离的方案
上传必须用 fetch + FormData 单独发，不能提交整个表单
长表格如果套在 <form></form> 里并用 submit，整页刷新或全量提交会打乱状态。正确做法是：每行上传按钮点击后，只收集该行数据构造独立请求：
- 获取当前行的
<input type="file">元素和关联的files[0] - 新建
new FormData()，.append('file', file)，再.append('row_id', '123')等元数据 - 用
fetch('/api/upload-config', { method: 'POST', body: formData })发送 - 禁用按钮、显示 loading 状态，防止重复点击
常见坑：accept、size 校验没绑定到具体行，导致提示错位
如果你统一监听所有 input[type="file"] 的 change 事件，但没区分是哪一行触发的，校验失败时弹窗或清空操作可能作用在错误的单元格上：
- 校验逻辑必须从事件目标向上找最近的
<tr>，再取 <code>data-row-id -
accept="application/json,text/plain"要写在每个input上，不能只写在第一行 - 文件大小检查别硬编码阈值，可从
data-max-size="5242880"动态读取 - 校验失败后执行
event.target.value = ''，只清空当前输入框，不影响其他行
最易被忽略的是后端接收逻辑——每行上传本质是 N 个独立请求，后端接口必须能根据 row_id 精准更新对应记录，而不是把所有上传都塞进同一个配置表主键里。前端传的标识和后端存的键必须严格一一对应，否则“上传成功”但配置没生效，排查起来极难定位到是哪一行断链了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
