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

作者:橙子时间:2026-10-29 14:26:30浏览:307

本文介绍在 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);
  });

关键配置:取消 Content-Type 与 FormData 使用

核心难点在于取消POST请求默认的Content-Type,并采用FormData方式进行上传。通常Ajax上传文件均使用FormData方式。

以上为本文介绍的Angular JS文件上传之form-data方法,希望读者喜欢。

作者最新文章