angularjs上传文件怎么设置$http为multipart/form-data

Posted 2023-04-02

参考技术A 前言：很久没更新博客，最近公司pc端技术选型用angular,这几天就赶鸭子上架，硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题：图片上传。 主题：图片上传服务器，然后通过服务器传阿里云。 不废话了直接贴前端代码： $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); ); 其实没神马难点，主要是取消post默认的Content-Type,然后已FormData的方式上传。一般ajax上传文件都是以FormData方式传。 以上就是本文给大家介绍Angular Js文件上传之form-data，希望大家喜欢。

使用 angularjs $http 将内容类型设置为 utf-8

【中文标题】使用 angularjs $http 将内容类型设置为 utf-8

【英文标题】：set content-type to utf-8 with angularjs $http

【发布时间】：2013-12-26 00:42:17

【问题描述】：

我正在将包含文件、文本等的表单上传到 appengine blobstore：

$http(
    method: 'POST',
    url: the_url,
    transformRequest: formDataObject,
    data: event,
    headers: 'Content-Type': undefined
)

请求成功发送并带有以下标头：

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryYeRxOO7y3qHNWd83

当我尝试将内容类型设置为 "multipart/form-data;charset=UTF-8" 时，我失去了边界并在响应中收到错误：Bad content type. Please use multipart.

添加 UTF-8 字符集的正确方法是什么？

【参考方案1】：

根据 RFC 1341：

As stated in the definition of the Content-Transfer-Encoding field, no encoding other than "7bit", "8bit", or "binary" is permitted for entities of type "multipart". The multipart delimiters and header fields are always 7-bit ASCII in any case, and data within the body parts can be encoded on a part-by-part basis, with Content-Transfer-Encoding fields for each appropriate body part.

所以在这种情况下你必须使用Content-Transfer-Encoding 而不是Content-Type。

【讨论】：

我很困惑。我正在使用 FormData 追加方法developer.mozilla.org/en-US/docs/Web/API/FormData。我不知道如何/在哪里设置 Content-Transfer-Encoding。也许我需要对我的文本进行 base64 编码。

将标题设置为：headers: 'Content-Transfer-Encoding': 'utf-8' ，而不是您现在拥有的。

with headers: 'Content-Transfer-Encoding': 'utf-8' 我得到： Refused to set unsafe header "Content-Transfer-Encoding" angular.js:6649 (匿名函数) angular.js:6649 q angular.js:203（匿名函数） angular.js:6648 y angular.js:6518 g angular.js:6252 r angular.js:9042 r angular.js:9042（匿名函数） js:9128 g.$eval angular.js:9953 g.$digest angular.js:9809 g.$apply angular.js:10039（匿名函数） angular.js:15394（匿名函数） angular.js:2246 q angular .js:196 Nc.c

嗯。那我没主意了。对不起。

我已将您的问题标记为正确，因为它揭示了一些情况以及我在那里不需要 utf-8 的事实。

【参考方案2】：

我的解决方案是什么都不做：

事实证明，使用headers: 'Content-Type': undefined 是正确的。现在一切正常（我只更改了后端）。

问题是 webob 忽略了编码，因此我认为编码是错误的。升级 webob 解决了这个问题。之所以很难检测到，是因为开发服务器默认使用新的 webob，而生产服务器默认使用旧的 webob 版本，因为 app.yaml 中没有指定新版本：

libraries:
- name: webob
  version: "1.2.3"

【参考方案3】：

必须设置字符集，例如： 内容类型：multipart/form-data；边界=----WebKitFormBoundaryYeRxOO7y3qHNWd83; charset=UTF-8