AngularJS 实现文件上传：使用 FormData 与取消默认 Content-Type

作者：橙子

时间：2026-10-29

本文介绍在 AngularJS 中通过 $http 服务实现文件上传的方法。核心步骤包括使用 FormData 对象封装文件数据，并将请求头 Content-Type 设置为 undefined 以启用浏览器自动边界生成。通过 transformRequest 转换请求体，确保文件能正确发送至服务器，进而支持后续如上传至阿里云等场景。

文章目录

AngularJS 文件上传背景与场景

前言：许久未更新博客，近期公司PC端技术选型采用Angular，随即快速上手。期间遇到诸多问题，今日聚焦于一个常见场景：图片上传。

主题：将图片上传至服务器，再由服务器转发至阿里云。

不赘述，直接展示前端代码：

$http 服务实现文件上传代码示例


$http({
　　method: ‘POST‘,
　　url: ‘/wechatapp/User/setAvatar‘,
  data: data,
  headers: {
    ‘Content-Type‘: undefined
  },
  transformRequest: function(data) {
    var formData = new FormData();
    formData.append(‘avatar_data‘, data.adata);
    formData.append(‘avatar_file‘, data.file);
    return formData;
  },
  data: {
    adata: scope.avatar_data,
    file: scope.avatar_file
  }
  }).success(function(d) {
    //请求成功
    cb(d);
  }).error(function(err, status) {
    console.log(err);
    cb(err);
  });