如何减少multipart/form-data格式POST请求的发送耗时？

• 前端预压缩文件：这是最直接有效的优化手段，上传慢大多是文件体积过大导致的。图片类文件可以通过Canvas调整分辨率、降低质量来压缩；文档、压缩包这类可以用JS压缩库处理后再上传。你说的在绑定到FormData前压缩完全可行，压缩后再append到FormData中，能大幅减少传输体积，直接降低请求耗时。

• 优化传输策略：

  • 启用HTTP/2或HTTP/3协议，相比HTTP/1.1能复用连接、支持并行传输，多文件上传时效率提升明显
  • 分块上传（断点续传）：把大文件分割成小块逐个上传，既避免单次传输过大导致的慢传输，还能在传输中断后恢复进度
  • 确认服务器端的网络带宽、存储写入速度是否存在瓶颈，排除后端接收环节的性能问题

针对你提出的两种方案的分析 #

1. 绑定FormData前压缩文件：完全可行，且是优先推荐的方案。这里给个图片压缩的简单示例代码：

// 图片压缩函数
function compressImage(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        // 按原尺寸的50%压缩
        canvas.width = img.width * 0.5;
        canvas.height = img.height * 0.5;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 生成压缩后的Blob，0.7为质量参数（0-1）
        canvas.toBlob((blob) => {
          resolve(new File([blob], file.name, { type: file.type }));
        }, file.type, 0.7);
      };
    };
    reader.readAsDataURL(file);
  });
}

// 用压缩后的文件构建FormData
files.forEach(async (fileObj) => {
  const compressedFile = await compressImage(fileObj);
  formData.append('file', compressedFile, fileObj.path);
});

2. 将请求体JSON.stringify后后端解析：不建议这么做。因为二进制文件转成base64字符串后体积会增加约30%，反而会让传输更慢；而且后端还要额外做base64解码转文件的操作，会增加服务器性能消耗，完全得不偿失。

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