angularjs上传文件怎么设置$http为multipartform-data

前言：很久没更新博客，最近公司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，希望大家烂派喜欢。

首先，标准HTTP协议对上传文件燃念等表单的定义在这里：wwwietforg/rfc/rfc1867txt 大概数据包格式如下：

单文件：

Content-type: multipart/form-data, boundary=AaB03x

--AaB03x

content-disposition: form-dataname="field1"

Joe Blow

--AaB03x

content-disposition: form-dataname="pics"filename="file1.txt"

Content-Type: text/plain

... contents of file1.txt ...

--AaB03x--

多文件：

Content-type: multipart/form-data, boundary=AaB03x

--AaB03x

content-disposition: form-dataname="field1"

Joe Blow

--AaB03x

content-disposition: form-dataname="pics"

Content-type: multipart/mixed, boundary=BbC04y

--BbC04y

Content-disposition: attachmentfilename="file1.txt"

其次，python上传文件的几种方法：

1 自己封装皮祥困HTTP的POST数据包：http//stackoverflowcom/questions/680305/宴链using-multipartposthandler-to-post-form-data-with-python

import httplibimport mimetypesdef post_multipart(host, selector, fields, files): content_type, body = encode_multipart_formdata(fields, files) h = httplib.HTTP(host) h.putrequest('POST', selector) h.putheader('content-type', content_type) h.putheader('content-length', str(len(body))) h.endheaders() h.send(body) errcode, errmsg, headers = h.getreply() return h.file.read() def encode_multipart_formdata(fields, files): LIMIT = '----------lImIt_of_THE_fIle_eW_$' CRLF = '\r\n' L = [] for (key, value) in fields: L.append('--' + LIMIT) L.append('Content-Disposition: form-dataname="%s"' % key) L.append('') L.append(value) for (key, filename, value) in files:

angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法，所以可以直接这样写：

$http({

method: 'POST',

url: url,

eventHandlers: {

progress: function(c) {

console.log('Progress ->' + c)

console.log(c)

}

},

uploadEventHandlers: {

progress: function(e) {

console.log('UploadProgress ->' + e)

console.log(e)

}

},

data: uploadData,

}).success(function(data) {

console.log(data)

}).error(function(data, status) {

console.log(data)

})

最后，也可以用比较凳枝成熟举粗搜的组件去解决，正历推荐angular-file-upload

---