Angular上传图片时压缩处理：解决Base64字符串过大无法上传问题

你遇到的这个问题太常见了——大图片转成Base64后体积会直接膨胀约33%，很容易突破上传的大小限制。这里有两个靠谱的解决方案，你可以根据业务需求选择：

方案1：直接用FormData上传原文件（强烈推荐） #

这个方法完全跳过Base64转换，直接把文件以二进制形式提交，既避免了体积膨胀，还简化了代码逻辑。修改你的代码如下：

HTML（保持原有结构即可） #

<input type="file" (change)="onFileSelected($event)"> 
<button type="submit" title="upload" (click)="uploadImage()"></button>

TS文件修改 #

selectedFile: File | null = null;

onFileSelected(event: any) {
  const files = event.target.files;
  if (files && files[0]) {
    this.selectedFile = files[0];
  }
}

async uploadImage() {
  if (!this.selectedFile) return;

  const formData = new FormData();
  // 第一个参数是后端接收的字段名，可根据实际需求修改
  formData.append('image', this.selectedFile, this.selectedFile.name);

  // 替换成你的实际上传API地址
  try {
    const response = await fetch('/your-upload-api', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    console.log('上传成功', result);
  } catch (error) {
    console.error('上传失败', error);
  }
}

FormData是浏览器原生对象，能直接把文件以原始二进制格式上传，后端可以像处理普通文件上传一样接收，完全没有Base64的体积损耗问题。

方案2：用Canvas压缩图片后再转Base64 #

如果你的业务场景必须使用Base64（比如前端预览、本地处理等），可以通过Canvas先压缩图片的尺寸和质量，再转换为Base64字符串。修改TS代码如下：

base64textString: string = '';

onFileSelected(event: any) {
  const files = event.target.files;
  const file = files[0];
  if (files && file) {
    this.compressImage(file);
  }
}

async compressImage(file: File) {
  const img = await this.loadImage(file);
  const canvas = document.createElement('canvas');
  
  // 限制压缩后的最大宽度，高度按比例自动缩放
  const maxWidth = 800;
  const scale = maxWidth / img.width;
  canvas.width = maxWidth;
  canvas.height = img.height * scale;

  const ctx = canvas.getContext('2d');
  if (!ctx) return;
  // 绘制压缩后的图片
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 调整质量参数（范围0-1，1为无损），0.7左右的质量就能大幅缩小体积
  this.base64textString = canvas.toDataURL('image/jpeg', 0.7);
  console.log('压缩后的Base64字符串', this.base64textString);
}

// 封装图片加载为Promise
loadImage(file: File): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
}

uploadImage() {
  // 使用压缩后的base64textString进行上传
  console.log('准备上传压缩后的Base64', this.base64textString);
}

注意：如果处理的是带透明通道的PNG图片，把image/jpeg改成image/png，否则透明区域会变成黑色。

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