文件上传与HTTP $ [英] file upload with $http

问题描述

这个问题是不是太难了？

我有我的客户端code用POST数据变量，想知道怎样才能文件中的数据添加到 $ http.post 。

我见过一些例子，无论他们用的是自定义的指令或手动提交表单，既不其中我要找的。

客户端：

 ＆LT;输入类型=文件ID =照片＆GT;
//文件可以使用访问
变种照片=的document.getElementById（照片）的文件[0]。
$ scope.data.photo =照片
 

或

  VAR FORMDATA =新FORMDATA（）;
formData.append（照片，照片）;
formData.append（称号，$ scope.data.title）;
this.delegate.insert（FORMDATA）;
 

调度服务

  $ http.post（/管理/扬声器/？+数据，token.body）//token.body = $ scope.data
    .success（功能（数据，状态，头，配置）{
     }）
    .error（功能（数据，状态，头，配置）{
    }）;
 

期望输出服务器端（使用邮差生产 - REST客户端）

 的console.log（request.files，request.body）;{照片：
   {字段名：'照片'，
     ORIGINALNAME：'01的.jpg'，
     名称：'fbb54fa6d588ac253ca7dab08a904356.jpg'，
     编码：'7位'，
     MIME类型：图像/ JPEG，
     路径：'/var/folders/jg/hkmz0fdn64g8w1jgf60j2lcw0000gn/T/fbb54fa6d588ac253ca7dab08a904356.jpg'，
     延伸：JPG，
     大小：12279，
     截断：假的，
     缓冲区：空}}{名称：'SA'，
  标题：'开发'，
  公司：CA，
  生物：一些生物，
  Twitter的：@twitter'，
  的sessionId：'1'}
 

解决方案

尝试 Content-Type头设置为未定义和 transformRequest 到 angular.identity （不序列化对象FORMDATA）：

  $ http.post（/管理/扬声器/？+数据，token.body，{
    transformRequest：angular.identity，
    标题：{
        内容类型：未定义
    }
}）。成功（功能（数据，状态，头，配置）{}）错误（功能（数据，状态，头，配置）{}）;
 

  

角的默认transformRequest功能将尝试序列我们FORMDATA对象，所以我们与身份的功能覆盖它原样保留数据。角的默认Content-Type头的POST和PUT请求是application / JSON，所以我们想改变这个。通过设置内容类型：未定义，浏览器设置内容类型为multipart / form-数据为我们在正确的边界填充。手动设置的Content-Type：多部分/表单数据将无法填补请求的边界参数。

  
  

（https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs)

Is this question too difficult?

I've my client side code with post data variables, and wondering how can I add file data to $http.post.

I've seen some examples and either they are using a custom directive or manual form submission, neither of which I'm looking for.

Client Side:

<input type="file" id="photo">
//file can be accessed using
var photo = document.getElementById("photo").files[0];
$scope.data.photo = photo 

OR

var formData = new FormData();
formData.append("photo", photo);
formData.append("title", $scope.data.title);
this.delegate.insert(formData); 

Dispatched to service

$http.post("/admin/speakers/?" + data, token.body) //token.body = $scope.data
    .success(function(data, status, headers, config) {
     })
    .error(function(data, status, headers, config) {
    });

Expecting Output Server Side (produced using POSTMAN - a REST client)

console.log(request.files, request.body);

{ photo: 
   { fieldname: 'photo',
     originalname: '01.jpg',
     name: 'fbb54fa6d588ac253ca7dab08a904356.jpg',
     encoding: '7bit',
     mimetype: 'image/jpeg',
     path: '/var/folders/jg/hkmz0fdn64g8w1jgf60j2lcw0000gn/T/fbb54fa6d588ac253ca7dab08a904356.jpg',
     extension: 'jpg',
     size: 12279,
     truncated: false,
     buffer: null } } 

{ name: 'SA',
  title: 'Dev',
  company: 'CA',
  bio: 'some bio',
  twitter: '@twitter',
  sessionId: '1' }

解决方案

Try setting the Content-Type header to undefined and the transformRequest to angular.identity (to not serialize the FormData object):

$http.post("/admin/speakers/?" + data, token.body, {
    transformRequest: angular.identity,
    headers: {
        'Content-Type': undefined
    }
}).success(function(data, status, headers, config) {

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

});

Angular’s default transformRequest function will try to serialize our FormData object, so we override it with the identity function to leave the data intact. Angular’s default Content-Type header for POST and PUT requests is application/json, so we want to change this, too. By setting ‘Content-Type’: undefined, the browser sets the Content-Type to multipart/form-data for us and fills in the correct boundary. Manually setting ‘Content-Type’: multipart/form-data will fail to fill in the boundary parameter of the request.

(https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs)

这篇关于文件上传与HTTP $的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！