使用cypress-file-upload上传大于5MB文件失败问题求助

• 调整全局超时配置
  在cypress.config.js（旧版对应cypress.json）中修改超时参数，避免大文件上传未完成就被Cypress提前中断：

  module.exports = defineConfig({
    e2e: {
      defaultCommandTimeout: 120000, // 单位毫秒，这里设为2分钟，可按需调整
      requestTimeout: 120000,
      responseTimeout: 120000
    }
  })
  

• 优化attachFile调用参数
  cypress-file-upload默认用base64编码处理文件，大文件使用base64容易出现截断、性能问题，可指定binary编码模式，同时增加强制触发参数：

  cy.get('[data-cy="...."]').attachFile(
    { filePath: fileToAttach, encoding: 'binary' },
    { force: true }
  )
  // 如果是拖拽上传场景，额外添加subjectType参数：
  // { force: true, subjectType: 'drag-n-drop' }
  

• 验证文件对象有效性
  如果是手动构造的File对象传入attachFile，调用前先校验文件大小、MIME类型与实际文件一致，避免因硬编码错误的size属性被表单拦截：

  cy.log('待上传文件大小', fileToAttach.size) // 对比实际文件大小确认无异常
  

• 排查上传逻辑限制
  先在普通浏览器中手动上传同规格大文件，确认业务表单本身没有5MB的上传大小限制。如果手动上传正常，可打开Cypress运行时的开发者工具，查看上传请求的Content-Length、请求体是否完整，确认文件是否被正确提交。
• 改用原生API实现上传
  第三方包兼容性问题可通过原生操作input元素绕过，稳定性更高：

  cy.get('[data-cy="...."]').then($input => {
    cy.fixture('你的文件路径', 'binary').then(fileContent => {
      const blob = Cypress.Blob.binaryStringToBlob(fileContent, '你的文件MIME类型')
      const uploadFile = new File([blob], '文件名', { type: '你的文件MIME类型' })
      const dataTransfer = new DataTransfer()
      dataTransfer.items.add(uploadFile)
      $input[0].files = dataTransfer.files
      $input[0].dispatchEvent(new Event('change', { bubbles: true }))
    })
  })
  

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