Angular中如何校验重复上传文件？lodash代码问题排查

你的代码不生效是因为filter的匹配逻辑写法错误：

• lodash的filter支持传入对象作为匹配谓词，规则是对象的每个属性值和遍历项的对应属性做严格相等判断。你写的{name: duplicateFile}是要求遍历项的name属性值严格等于整个['file1', 'file2', 'file3']数组，但单个上传文件的name是字符串类型，永远无法满足匹配条件，因此filteredValues始终为空数组，后续判断逻辑自然失效。
• 原逻辑的判断阈值也有问题：如果是校验上传文件和已有文件重名，只要匹配到1个及以上重名文件就应该判定为重复，不需要判断数量大于1。

场景1：校验上传文件与服务端已有文件名重复（匹配你原代码的需求） #

duplicateFile是服务端已存在的不允许重名的文件名清单，用includes判断文件名是否在清单内即可：

import { filter, size, includes } from 'lodash';

// 服务端已存在的文件名列表
const existFileNames = ['file1', 'file2', 'file3'];
// file为用户上传的文件列表
const duplicateFiles = filter(file, item => includes(existFileNames, item.name));
const hasDuplicate = size(duplicateFiles) > 0;

if (hasDuplicate) {
  console.log('检测到重复文件');
} else {
  console.log('无重复文件');
}

场景2：校验本次批量上传的文件内部存在重名 #

如果是要判断用户本次选的多个文件里自己就有重名的，可以按文件名分组后判断每组数量：

import { groupBy, filter, size, map } from 'lodash';

// 按文件名对上传文件分组
const fileGroupByName = groupBy(file, 'name');
// 筛选出文件数大于1的分组，即为重名项
const duplicateGroups = filter(fileGroupByName, group => size(group) > 1);
const hasDuplicate = size(duplicateGroups) > 0;

if (hasDuplicate) {
  console.log('检测到上传列表内存在重复文件');
} else {
  console.log('无重复文件');
}

• 如果文件名存在大小写差异、带路径前缀、后缀名格式不统一的情况，比对前要先对文件名做统一格式化处理，避免漏判。
• 如果是大文件校验，不建议仅用文件名判断重复，最好结合文件大小、文件MD5值做多重校验，准确率更高。

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