解决文件只能在windows系统上传成功,而linux系统上传失败。

场景:在我们项目准备上线进行SIT测试的时候,测试在文件上传的时候,一直上传不成功,表示当前文件不支持上传,然后我们让测试将他的文件发送给我们进行测试,我们是能够上传成功的,然后询问他们使用的什么系统,发现他们使用的是Linux发行版操作系统Ubuntu。

分析原因:可能是由于Linux和Windows操作系统在处理文件类型和扩展名时的一些差异导致的。最后检查发现,Linux和Windows操作系统可能使用不同的方式来检测文件的MIME类型(file.type),或者可能返回不同的MIME类型。

因为之前前端在进行校验的时候是通过file.type进行判断的,为了避免这个问题,所以直接使用文件的后缀进行判断是否可以上传,对于windows和linux来说处理方式都是一致的,这样就解决了文件上传的业务问题。

前端代码(修改之前的):

javascript 复制代码
beforeUpload: async (file: File) => {
      if (file.size === 0) {
        message.error(`文件 ${file.name} 为空文件`);
        return Upload.LIST_IGNORE;
      }
      // 获取后缀
      let extension: any = file.name.split(".");
      extension = extension[extension.length - 1];
      
      if (
         
          extension === "rar" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
          file.type === "application/msword" ||
          file.type === "application/vnd.ms-word.document.macroEnabled.12" ||
          file.type === "application/vnd.ms-word.template.macroEnabled.12" ||
          file.type === "text/plain" ||
          file.type === "application/pdf" ||
          file.type === "application/x-zip-compressed" ||
          file.type === "application/octet-stream" ||
          file.type === "application/zip" ||
          file.type === "application/x-rar" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          file.type === "application/vnd.ms-excel" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.template" ||
          file.type === "application/vnd.ms-excel.sheet.macroEnabled.12" ||
          file.type === "application/vnd.ms-excel.template.macroEnabled.12" ||
          file.type === "application/vnd.ms-excel.addin.macroEnabled.12" ||
          file.type === "application/vnd.ms-excel.sheet.binary.macroEnabled.12" ||
          file.type === "application/vnd.ms-powerpoint" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.presentationml.presentation" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.presentationml.template" ||
          file.type ===
          "application/vnd.openxmlformats-officedocument.presentationml.slideshow" ||
          file.type === "application/vnd.ms-powerpoint.addin.macroEnabled.12" ||
          file.type ===
          "application/vnd.ms-powerpoint.presentation.macroEnabled.12" ||
          file.type === "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"
      ) {
        // 添加到本地待上传
        let data = await getMinioUploadId(fileExtension,file.name);
        let run = new UploadChunk(file, data["upload_id"], data["filename"]);
        ....
      } //只提供主要代码

发现是使用的file.type进行判断,通过debug发现windows和linux返回的file.type是不一致的,所以使用了文件的后缀进行判断。

前端代码(修改之后的):

第一种方式:

使用文件扩展名检测 :不依赖于file.type来确定文件类型,而是使用文件的扩展名进行检测。

javascript 复制代码
beforeUpload: async (file: File) => {
      if (file.size === 0) {
        message.error(`文件 ${file.name} 为空文件`);
        return Upload.LIST_IGNORE;
      }
      //允许上传的文件后缀
      const allowedExtensions = [
        "rar",
        "doc",
        "docx",
        "txt",
        "pdf",
        "zip",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
      ];

     
      // 获取后缀
      // @ts-ignore
      const fileExtension:string = file.name.split(".").pop();
      if (
          allowedExtensions.includes(fileExtension.toLowerCase())
          
      ) {
        // 添加到本地待上传
        let data = await getMinioUploadId(fileExtension,file.name);
        let run = new UploadChunk(file, data["upload_id"], data["filename"]);
        ...
      }//只提供主要代码

前端代码(修改之后的):

第二种方式:

针对特定MIME类型的检测:如果您希望继续使用file.type,则需要确保您的条件可以正确检测到不同操作系统上的文件类型。

javascript 复制代码
const allowedMimeTypes = [
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  "application/msword",
  // 添加其他支持的MIME类型,llowedMimeTypes数组包含了您在Linux和windows系统上遇到的所有需要支持的MIME类型。
];

if (allowedMimeTypes.includes(file.type)) {
  // 允许上传
  // ...继续上传的逻辑
} else {
  message.error(`${file.name} 并不是可上传文件`);
}

通过修改过后的代码进行测试,windows和linux系统操作我们部署的项目执行文件上传都能够上传成功了。

相关推荐
可爱又迷人的反派角色“yang”33 分钟前
ansible剧本编写(三)
linux·网络·云计算·ansible
m0_7381207238 分钟前
应急响应——知攻善防Web-3靶机详细教程
服务器·前端·网络·安全·web安全·php
石像鬼₧魂石6 小时前
内网渗透靶场实操清单(基于 Vulhub+Metasploitable 2)
linux·windows·学习·ubuntu
Danileaf_Guo6 小时前
256台H100服务器算力中心的带外管理网络建设方案
运维·服务器
橘子真甜~7 小时前
C/C++ Linux网络编程15 - 网络层IP协议
linux·网络·c++·网络协议·tcp/ip·计算机网络·网络层
程序员爱钓鱼8 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder8 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
拾贰_C8 小时前
【Linux | Windows | Terminal Command】 Linux---grep | Windows--- findstr
linux·运维·服务器
JIngJaneIL8 小时前
基于springboot + vue古城景区管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
敲敲了个代码8 小时前
隐式类型转换:哈基米 == 猫 ? true :false
开发语言·前端·javascript·学习·面试·web