Angular文件上传中.rar文件无法获取MIME类型问题求助

核心原因是浏览器对RAR文件的MIME类型没有统一识别标准，大部分主流浏览器不会为RAR文件返回你预设的application/vnd.rar，而是直接返回空字符串，导致MIME类型校验逻辑误判。

以下是具体解决方案：

方案1：调整MIME类型校验逻辑，兼容空值情况 #

修改fileBrowseHandler中的MIME校验代码，当文件类型为空时，跳过MIME校验（或仅针对RAR文件跳过）：

// 原代码
// if (!this.validContentTypes.includes(item.type)) { 
//     item.valid = false;
//     item.error = "Invalid file content.";
// }

// 修改后：当type不为空时才校验，空值则跳过（结合扩展名校验已确保合法性）
if (item.type && !this.validContentTypes.includes(item.type)) {
    item.valid = false;
    item.error = "Invalid file content.";
}

// 或者更严谨的版本：仅对非RAR文件校验MIME类型
const ext = item.name.split('.').pop()?.toLowerCase();
if (!this.validContentTypes.includes(item.type) && ext !== 'rar') {
    item.valid = false;
    item.error = "Invalid file content.";
}

方案2：补充更多RAR相关的MIME类型 #

部分浏览器可能返回application/x-rar-compressed或application/rar作为RAR文件的MIME类型，把这些值加入合法类型列表：

validContentTypes: string[] = [
    "image/jpeg", "image/bmp", "image/png", 
    "application/pdf", "text/plain", "application/rtf", 
    "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", 
    "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
    "application/x-zip-compressed", 
    // 补充RAR相关MIME类型
    "application/vnd.rar", 
    "application/x-rar-compressed", 
    "application/rar", 
    "video/mp4"
];

方案3：优化校验顺序，优先依赖扩展名校验 #

因为MIME类型的可靠性不如扩展名（尤其是非标准文件类型），可以调整校验顺序：先检查扩展名，再检查MIME类型，并且当MIME校验不通过但扩展名合法时，放宽判断：

fileBrowseHandler(files: Array<any>) {
    for (const item of files) {
        item.valid = true;
        item.error = "";

        // 先校验大小
        if (item.size > 10485760) {
            item.valid = false;
            item.error = "Max file size is 10 MB.";
        }
        if (item.size == 0) {
            item.valid = false;
            item.error = "Min file size is 1 Byte.";
        }

        // 先校验扩展名
        const ext = item.name.split('.').pop()?.toLowerCase();
        if (!ext || !this.validExtensions.includes(ext)) {
            item.valid = false;
            item.error = "Invalid file extension.";
        }

        // 再校验MIME类型：仅当扩展名合法但MIME类型不在列表中时，才报错（排除RAR的空值情况）
        if (ext && this.validExtensions.includes(ext) && item.type && !this.validContentTypes.includes(item.type)) {
            // 针对RAR特殊处理
            if (ext !== 'rar') {
                item.valid = false;
                item.error = "Invalid file content.";
            }
        }

        // Other stuff
    }

    this.fileDropEl.nativeElement.value = "";
}

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