如何使用 Angularjs、multipart/form-data 上传文件答案

【问题标题】：how to upload file using Angularjs, multipart/form-data如何使用 Angularjs、multipart/form-data 上传文件
【发布时间】：2016-11-29 14:32:53
【问题描述】：

我想使用 Angularjs 上传图片，任何人都知道如何做到这一点..REST API 想要

Content-Type:multipart/form-data

www.abc.com/images/id
Request Body
{
    // --Boundary_1_1626119499_1392398808202
    // Content-Type: image/png
    // Content-Disposition: form-data; filename="ducky.png"; modification-date="Wed, 05 Nov 2016 19:53:17 GMT"; size=713915; name="upload_image"        

    // {binary data truncated for display}
}

我的问题是如何使用上面的 REST API 上传图片文件，如何分配 $scope.tempObject = 我的上传图片路径

 $scope.UploadImage =  function () { 
        var config = {headers:  {      
    'Content-Type': 'multipart/form-data'

       }
        }

    $http.post(properties.customerUploadImage_path + "/"+checkprofile,$scope.tempObject,config).success(function (response) { 
 Console.log('Uploaded');
    });


    }

【问题讨论】：

使用内容类型：未定义
嗨，你应该考虑使用这个库。它真的对我有用:) github.com/danialfarid/ng-file-upload

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

我认为你没有正确使用$http。

您可以使用$http 服务的headers 属性，如下所示：

$scope.UploadImage = function () { 
  var config = {
    headers: {      
      'Content-Type': 'multipart/form-data',
    }
  };

  $http({
    method: 'POST',
    url: properties.customerUploadImage_path + "/" + checkprofile,
    data: $scope.tempObject,
    config: config,
  }).success(function (response) { 
    console.log('Uploaded');
  });


};

我建议你看看documentation。

【讨论】：

【解决方案2】：

使用"Content-Type": undefined 配置标题并使用FormData API：

  var config = { headers: {
                   "Content-Type": undefined,
                  }
               };

  vm.upload = function() {

    var formData = new $window.FormData();

    formData.append("file-0", vm.files[0]);

    $http.post(url, formData, config).
     then(function(response) {
      vm.result = "SUCCESS";
    }).catch(function(response) {
      vm.result = "ERROR "+response.status;
    });
  };

AngularJS $http 服务通常使用Content-Type: application/json。通过设置 Content-Type: undefined，框架将省略 Content-Type 标头，浏览器将使用其默认的内容类型 multipart/form-data 用于 FormData 对象。

请求标头

POST /post HTTP/1.1
Host: httpbin.org
Connection: keep-alive
Content-Length: 388298
Accept: application/json, text/plain, */*
Origin: https://run.plnkr.co
User-Agent: Mozilla/5.0 Chrome/55.0.2883.54 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary9lBDT4yoh8lKWtIH
Referer: https://run.plnkr.co/cW228poRVzWs67bT/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

请求负载

------WebKitFormBoundary9lBDT4yoh8lKWtIH
Content-Disposition: form-data; name="file-0"; filename="Crop.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary9lBDT4yoh8lKWtIH--

DEMO on PLNKR。

有关详细信息，请参阅，

【讨论】：