表单上传两张图片时Controller接收同一张图片的问题

嘿，我一眼就揪出问题所在了！你的jQuery代码里选择器用错了，导致两个字段都取到了同一个文件。

看这段上传代码：

formdata.append('image',$('input[type=file]')[0].files[0]);
formdata.append('tei',$('input[name="tei"]')[0].files[0]);

$('input[type=file]')会把页面上所有type为file的输入框都选中，然后[0]取的是第一个匹配到的元素——也就是你HTML里先写的那个name="tei"的文件输入框。这就导致你把同一个文件既加到了image字段，又加到了tei字段，所以Controller里拿到的自然是同一张图了。

解决办法 #

给你两个靠谱的修复方案：

方案一：用name属性精准选择（推荐） #

直接通过name属性定位对应的文件输入框，这样不管页面元素顺序怎么变，都不会出错：

formdata.append('image',$('input[name="image"]')[0].files[0]);
formdata.append('tei',$('input[name="tei"]')[0].files[0]);

方案二：按索引选择（不推荐，仅当页面结构固定时可用） #

如果确定页面上的file输入框顺序不会变，也可以通过索引取第二个元素，但这种方式维护性差，不建议：

formdata.append('image',$('input[type=file]')[1].files[0]); // 取第二个file输入框
formdata.append('tei',$('input[type=file]')[0].files[0]);

验证小技巧 #

以后遇到类似问题，可以在append完FormData后，在控制台打印出所有字段的文件名，提前确认是否正确：

for (const [key, file] of formdata.entries()) {
    console.log(`字段${key}对应的文件：${file.name}`);
}

这样就能快速排查是不是选择器或者append的问题啦。

内容的提问来源于stack exchange，提问作者Dev vivek