使用file-upload-with-preview.min.js上传大文件报错如何解决？

排查步骤 #

• 确认前端插件配置的文件大小限制
  file-upload-with-preview的maxFileSize配置项默认单位为KB，未显式配置时可能采用默认的较低阈值，超过阈值的文件会被插件前端直接拦截，触发错误回调。
• 确认Ajax请求的状态码
  打开浏览器控制台网络面板，上传大文件时观察请求状态：
  • 请求未发出且控制台抛出大小超限错误：属于前端配置问题
  • 请求返回413状态码：服务端限制了单次请求的最大大小
  • 请求返回超时错误：Ajax请求的超时时间设置过短，大文件还未传输完成就被中断
• 确认服务端的上传限制配置
  绝大部分服务端框架、反向代理的默认上传大小都低于100MB，10MB刚好命中部分集成环境的默认阈值，需要手动调整。

解决方法 #

前端配置调整 #

初始化插件时显式配置文件大小限制与请求超时时间，示例代码：

const uploader = new FileUploadWithPreview('yourUploadElementId', {
  // 100MB 换算为KB：100 * 1024 = 102400
  maxFileSize: 102400,
  // 按需设置最大上传文件数量，单视频上传可设为1
  maxFileCount: 1,
  ajaxSettings: {
    // 大文件上传需要更长超时时间，此处设为5分钟，单位毫秒
    timeout: 300000
  }
})

服务端配置调整 #

根据你使用的技术栈修改对应上传限制：

• Nginx：在http/server/location配置块添加client_max_body_size 100M;，重载配置后生效
• Spring Boot：在配置文件添加如下参数

  spring.servlet.multipart.max-file-size=100MB
  spring.servlet.multipart.max-request-size=100MB
  

• PHP：修改php.ini配置

  upload_max_filesize = 100M
  post_max_size = 100M
  max_execution_time = 300
  

可选优化：开启分片上传 #

如果你的业务场景存在弱网传输需求，可开启插件的分片上传能力，将大文件拆分为多个小分片依次传输，进一步降低单次请求超限的概率，示例配置：

const uploader = new FileUploadWithPreview('yourUploadElementId', {
  maxFileSize: 102400,
  // 开启分片上传
  chunkUpload: true,
  // 单个分片大小设为2MB，可按需调整
  chunkSize: 2048
})

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