如何在Ionic中使用FormData上传文件？含Ionic 3 FileTransfer方案

我来帮你梳理下在Ionic里用FormData做文件上传的两种主流方式——直接用HttpClient发送FormData，以及Ionic 3里的FileTransfer插件方案，结合你的代码片段给你补全和说明：

一、使用FormData + HttpClient实现文件上传 #

这种方式是Angular推荐的现代方案，不需要额外安装Cordova插件，兼容性更好。核心是把文件（或base64转成的Blob）和其他参数打包进FormData，再通过HttpClient发送请求。

完整代码示例 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class UploadService {
  constructor(private http: HttpClient) {}

  uploadFile(base64File: string, numDeclaration: string, ticket: string) {
    const formData = new FormData();
    
    // 把base64字符串转为Blob对象（如果后端支持直接接收base64可跳过这步）
    const blob = this.base64ToBlob(base64File, 'image/jpeg');
    formData.append('filedata', blob, 'uploaded-image.jpg'); // 第三个参数是服务器端接收到的文件名
    formData.append('numDeclaration', numDeclaration); // 添加额外参数

    // 拼接完整的上传接口地址
    const uploadUrl = `http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/f3589d6b-82db-44d2-9b6d-89a3e7e57442/children?alf_ticket=${ticket}`;

    // 发送POST请求
    return this.http.post(uploadUrl, formData, {
      observe: 'response', // 可以获取完整响应信息
      responseType: 'json'
    });
  }

  // 辅助方法：处理base64转Blob
  private base64ToBlob(base64: string, contentType: string): Blob {
    // 去掉base64前缀（如果有的话）
    const base64Data = base64.split(',')[1];
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    return new Blob([byteArray], { type: contentType });
  }
}

关键注意点 #

• 不要手动设置Content-Type: multipart/form-data，HttpClient会自动添加正确的请求头和边界符，手动设置反而容易出错。
• 如果你的base64字符串带有data:image/jpeg;base64,这类前缀，一定要先拆分去掉，否则转Blob会失败。

二、使用Ionic 3的FileTransfer插件上传 #

这是Ionic 3时代常用的传统方案，依赖Cordova插件，适合需要更精细控制上传过程（比如进度监听）的场景。

第一步：安装插件 #

先在项目里安装对应的插件：

ionic cordova plugin add cordova-plugin-file-transfer
npm install @ionic-native/file-transfer@4

完整代码示例 #

import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { Injectable } from '@angular/core';

@Injectable()
export class UploadService {
  private fileTransfer: FileTransferObject;

  constructor(private transfer: FileTransfer) {
    // 创建FileTransfer实例
    this.fileTransfer = this.transfer.create();
  }

  uploadWithFileTransfer(base64File: string, imageName: string, numDeclaration: string, ticket: string) {
    const uploadUrl = `http://localhost:8080/alfresco/api/-default-/public/alfresco/versions/1/nodes/f3589d6b-82db-44d2-9b6d-89a3e7e57442/children?alf_ticket=${ticket}`;

    // 配置上传选项
    const options: FileUploadOptions = {
      fileKey: 'filedata', // 对应后端接收文件的参数名
      fileName: imageName, // 服务器端保存的文件名
      chunkedMode: false, // 大文件可设为true开启分块上传
      mimeType: 'image/jpeg',
      params: { numDeclaration: numDeclaration }, // 额外参数会自动加入FormData
      headers: {}
    };

    // 执行上传（支持直接传入base64字符串作为源）
    return this.fileTransfer.upload(base64File, uploadUrl, options);
  }
}

关键注意点 #

• 额外参数要放在options.params里，插件会自动把它们打包进请求的FormData中，不需要手动拼接。
• 如果需要监听上传进度，可以添加回调：

this.fileTransfer.onProgress((progressEvent) => {
  const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
  console.log(`上传进度：${percent}%`);
});

两种方案对比 #

• FormData + HttpClient：无需插件，更符合Angular生态，适合大多数场景，推荐优先使用。
• FileTransfer：适合Ionic 3项目，支持进度监听、断点续传等高级功能，但在Ionic 4+之后逐渐被HttpClient替代。

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