与AngularJS多部分请求 [英] Multipart request with AngularJS

问题描述

我有一个API端点，而我必须发送一个多HTTP请求，由两部分组成，文件（文件系统文件）和数据（JSON对象）。

I have an API endpoint to which I must send a multipart HTTP request, composed of two parts, file (a file system file) and data (a JSON object).

经过一番研究，我发现了如何做AngularJS multipart请求：

After some research I found out how to do a multipart request in AngularJS:

$http({
   method: 'POST',
   url: url,
   headers: {
      'Content-Type': 'multipart/form-data'
   },
   data: {
      data: model,
      file: file
   },
   transformRequest: customFormDataObject
});

1）的 customFormDataObject 函数最初有这种形式：

1) The customFormDataObject function initially had this form:

customFormDataObject formDataObject = function (data, headersGetter) {
   var fd = new FormData();
   angular.forEach(data, function (value, key) {
      fd.append(key, value);
   });

   var headers = headersGetter();
   delete headers['Content-Type'];

   return fd;
};

这个实现的结果是该请求的各个部分没有设置为它们的contentType 。

2）阅读一些更后（ http://stackoverflow.com/a/24535293/689216 ）我试图用一个的Blob 对于这一点， customFormData 看起来像这样（有点乱，对象主要第一部分将的contentType 应用程序/ JSON 的，第二个图像/ PNG ）

2) After reading some more (http://stackoverflow.com/a/24535293/689216) I tried using a Blob for this, the customFormData object looking like this (a bit of a mess, basically the first part will be of contentType application/json, the second one image/png):

customFormDataObject = function (data, headersGetter) {
    var fd = new FormData();

    var contentType = 'application/json';
    angular.forEach(data, function (value, key) {
         fd.append(key, new Blob([JSON.stringify(value)], {
             type: contentType
         }));
         contentType = 'image/png';
    });

    var headers = headersGetter();
    delete headers['Content-Type'];

    return fd;
 };

此第二种方法设置正确的的contentType 的请求的每一部分，但它不会对部件设置的任何值。

This second approach sets the correct contentType for each part of the request, but it does not set any values for the parts.

基本上是发生了什么 1）正确的值在multipart内容设置，但的contentType 的未设置。随着 2）的的contentType 的设置，而不是值的上传

Basically what happens is with 1) the correct values are set in the multiparts, but the contentType's are not set. With 2) the contentType's are set, but not the values for the multiparts.

我缺少的东西吗？难道这个功能不应该喜欢这个工作？

Am I missing something? Is this functionality not supposed to work like this?

谢谢！

推荐答案

我刚刚解决了完全相同的问题。

I just solve exactly the same problem.

一些测试后，我有这种情况，你所描述：

After some tests, I had this situation that you've described:

基本上是1会发生什么）正确的值在multipart内容设置，但contentType中的未设置。随着2）将contentType的是对的上传设置，而不是值。

要解决这个问题，我不得不用斑点和发布的Ajax 而不是 $ HTTP POST

To fix this problem, I had to use Blob and Post Ajax instead of $http Post.

看来，$ HTTP并不在这种情况下正常工作。

It seems that $http does not work correctly in this case.

code：

    var formData = new FormData();

    var blobId = new Blob([100], { 'type':'text/plain' });
    formData.append('testId', blobId);

    var blobImage = fileService.base64ToBlob(contentToDecode, 'image/jpeg');
    formData.append('file', blobImage, 'imagem' + (i + 1) + '.jpg');

请求：

    $.ajax({
      url: url,
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      type: 'POST',
      success: function(response) {
        deferred.resolve(response);
        $rootScope.requestInProgress = false;
      },
      error: function(error) {
        deferred.reject(error);
        $rootScope.requestInProgress = false;
      }
    });

这篇关于与AngularJS多部分请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！