如何使用ng2-file-upload发送Base64格式的图片？

你已经在配置里设置了disableMultipart: true，这一步抓得很准——默认ng2-file-upload是用多部分表单（multipart/form-data）传文件的，要发Base64就得先把这个功能关掉。接下来我帮你把代码补全，实现完整的Base64上传流程：

步骤1：完善组件逻辑，处理文件转Base64 #

我们需要监听文件添加事件，把选中的文件转换成Base64字符串，再自定义请求发送逻辑：

import { Component, OnInit } from '@angular/core';
import { FileUploader, FileItem } from 'ng2-file-upload';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html'
})
export class ImageUploadComponent implements OnInit {
  private readonly UPLOAD_URL = '你的后端上传接口地址';
  public uploader: FileUploader = new FileUploader({ 
    url: this.UPLOAD_URL, 
    allowedMimeType: ['application/pdf', 'image/jpeg', 'image/png'], 
    maxFileSize: 10 * 1024 * 1024, // 10 MB 
    queueLimit: 3, 
    disableMultipart: true, // 核心配置：禁用多部分上传
  });

  ngOnInit(): void {
    // 监听文件添加完成事件，转Base64
    this.uploader.onAfterAddingFile = (fileItem: FileItem) => {
      this.convertToBase64(fileItem);
    };

    // 阻止默认上传逻辑，我们自己发请求
    this.uploader.onBeforeUploadItem = () => false;
  }

  // 将文件转换为Base64字符串（去掉前缀，方便后端解析）
  private convertToBase64(fileItem: FileItem): void {
    const reader = new FileReader();
    reader.onload = (e: ProgressEvent<FileReader>) => {
      const base64Full = e.target?.result as string;
      // 拆分掉"data:image/jpeg;base64,"这类前缀
      const base64Data = base64Full.split(',')[1];
      // 把Base64数据和文件信息存在fileItem的extra里
      fileItem.extra = {
        base64: base64Data,
        fileName: fileItem.file.name,
        fileType: fileItem.file.type
      };
    };
    reader.readAsDataURL(fileItem.file);
  }

  // 手动触发Base64上传
  public uploadAllBase64(): void {
    this.uploader.queue.forEach(fileItem => {
      if (!fileItem.extra?.base64) return;
      
      const xhr = new XMLHttpRequest();
      xhr.open('POST', this.UPLOAD_URL, true);
      // 设置请求头，告诉后端我们发的是JSON
      xhr.setRequestHeader('Content-Type', 'application/json');

      xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(`${fileItem.file.name} 上传成功`);
          fileItem.isSuccess = true;
        } else {
          console.error(`${fileItem.file.name} 上传失败: ${xhr.statusText}`);
          fileItem.isError = true;
        }
      };

      // 构造请求体，把Base64和文件信息传过去
      const payload = {
        fileName: fileItem.extra.fileName,
        fileType: fileItem.extra.fileType,
        base64Data: fileItem.extra.base64
      };

      xhr.send(JSON.stringify(payload));
    });
  }
}

步骤2：模板部分参考 #

你可以在组件模板里添加文件选择控件和上传按钮，方便用户操作：

<!-- 文件选择框 -->
<input type="file" ng2FileSelect [uploader]="uploader" multiple accept="image/jpeg,image/png,application/pdf" />

<!-- 上传按钮 -->
<button (click)="uploadAllBase64()" [disabled]="uploader.queue.length === 0">上传所有文件</button>

<!-- 显示上传状态 -->
<div class="file-list" *ngFor="let item of uploader.queue">
  <span>{{ item.file.name }}</span>
  <span class="success" *ngIf="item.isSuccess">✅ 上传完成</span>
  <span class="error" *ngIf="item.isError">❌ 上传失败</span>
</div>

关键注意事项 #

• disableMultipart: true是核心，必须保留，否则ng2-file-upload会强制用多部分表单发送，和Base64上传逻辑冲突。
• 转换Base64时记得去掉前缀，后端解析时不需要处理多余的标识，会更高效。
• 后端需要接收application/json格式的请求体，取出base64Data字段后解码成文件即可。
• 如果需要支持PDF，只需要保证allowedMimeType里包含对应类型，转换逻辑不需要额外修改。

内容的提问来源于stack exchange，提问作者Maicon e Nanda Blumenau