Fatal编程技术网
  • javascript/
  • Javascript 如何构造多部分MIME请求并使用AngularJS'$http方法？

Javascript 如何构造多部分MIME请求并使用AngularJS'$http方法？

javascript http angularjs post

Javascript 如何构造多部分MIME请求并使用AngularJS'$http方法？,javascript,http,angularjs,post,mime,Javascript,Http,Angularjs,Post,Mime,如何使用AngularJS$http方法构造多部分MIME请求并将其发布到服务器API 我正在尝试将图像上载到服务器。图片的二进制数据应该是请求主体的一部分，使用POST方法和多部分MIME完成。其余的查询参数可以作为查询字符串参数发送，也可以作为多部分MIME中的其他部分发送。下面是对请求应该是什么样子的捕获： POST https://webservice.platform.com/Service/V1/Service.ashx?Pictures_ProfilePhoto_Add HTTP/

如何使用AngularJS$http方法构造多部分MIME请求并将其发布到服务器API

我正在尝试将图像上载到服务器。图片的二进制数据应该是请求主体的一部分，使用POST方法和多部分MIME完成。其余的查询参数可以作为查询字符串参数发送，也可以作为多部分MIME中的其他部分发送。下面是对请求应该是什么样子的捕获：

POST https://webservice.platform.com/Service/V1/Service.ashx?Pictures_ProfilePhoto_Add HTTP/1.1
PlatformSDK: xxxyyyzzz
Host: webservice.platform.com
Content-Type: multipart/form-data; boundary=---------------------------8d084109e6bc7e4
Content-Length: 1789
Expect: 100-continue


-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationName"

name@domain.com - Sample App
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationPassword"

xxxxxnnnnnrrrqqqwwwssss
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="UserToken"

AABBCCDDEEFFGG
-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="ApplicationTag"


-----------------------------8d084109e6bc7e4
Content-Disposition: form-data; name="bytesFullPhotoData"; filename="bytesFullPhotoData"
Content-Type: application/octet-stream

�����JFIF��x�x�����C�   

-----------------------------8d084109e6bc7e4--
下面的代码将得到您要求的结果，但您应该使用下面链接中解释的指令方法


如何构造一个多部分MIME请求并使用AngularJS的$http方法发布它？











上传
"严格使用",；
var-app=angular.module（'app'，[]）；
app.controller（'TestCtrl'，函数（$scope，$http）{
$scope.filesToUpload=null；
$scope.fileInputChanged=函数（元素）{
$scope.$apply（函数（范围）{
scope.fileToUpload=element.files[0]；
});
};
$scope.uploadDocuments=函数（）{
var formData=new formData（）；
append（“ApplicationName”，$scope.ApplicationName）；
append（“ApplicationPassword”，$scope.ApplicationPassword）；
append（“UserToken”，$scope.UserToken）；
append（“ApplicationTag”，$scope.ApplicationTag）；
formData.append（“bytesfullpotodata”，$scope.fileToUpload）；
$http({
方法：“POST”，
url:“/api/Image/Upload”，/！+++设置您自己的位置
//如果设置内容类型，；boundary=将不在标题中，因此设置为未定义，这将强制浏览器填充
//x头：{“内容类型”：“多部分/表单数据”}，
标题：{
“内容类型”：未定义
},
数据：formData，
转换请求：功能（数据）{
返回数据；
}
}).成功（上载完成）。错误（上载失败）；
};
函数上传完成（数据、状态、标题、配置）{
$scope.filesToUpload=null；
var fileInput=$（“#fileInput”）；
fileInput.replaceWith（fileInput=fileInput.clone（true））；
控制台日志（数据）；
}
函数上载失败（数据、状态、标题、配置）{
console.log（'Upload failed！'）；
}
});
angular.element（文档）.ready（函数（）{
bootstrap（document.getElementById（'approt'），['app']）；
});
谢谢，
标题['Content-Type']=undefined
非常重要！我尝试了
headers['Content-Type']='multipart/formdata'但不起作用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>How to construct a multipart MIME request and POST it using AngularJS' $http method?</title>
</head>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <div id="appRoot">
        <div ng-controller="TestCtrl">
            <p>
                <input type="text" placeholder="Name" ng-model="applicationName" />
                <br />
                <input type="password" placeholder="Password" ng-model="applicationPassword" />
                <br />
                <input type="text" placeholder="Token" ng-model="userToken" />
                <br />
                <input type="text" placeholder="Tag" ng-model="applicationTag" />
                <br />
                <input type="file" onchange="angular.element(this).scope().fileInputChanged(this);" id="fileInput" />
            </p>
            <button type="button" ng-click="uploadDocuments()">Upload</button>
        </div>
    </div>

    <script type='text/javascript'>
        'use strict';

        var app = angular.module('app', []);

        app.controller('TestCtrl', function ($scope, $http) {
            $scope.filesToUpload = null;

            $scope.fileInputChanged = function (element) {
                $scope.$apply(function (scope) {
                    scope.fileToUpload = element.files[0];
                });
            };

            $scope.uploadDocuments = function () {
                var formData = new FormData();
                formData.append("ApplicationName", $scope.applicationName);
                formData.append("ApplicationPassword", $scope.applicationPassword);
                formData.append("UserToken", $scope.userToken);
                formData.append("ApplicationTag", $scope.applicationTag);
                formData.append("BytesFullPhotoData", $scope.fileToUpload);


                $http({
                    method: 'POST',
                    url: '/api/Image/Upload', //!++ Set your own location
                    // if you set Content-Type, ; boundary= won't be in header so set undefined which will force the browser to fill
                    //x headers: { 'Content-Type': 'multipart/form-data' },
                    headers: {
                        'Content-Type': undefined
                    },
                    data: formData,
                    transformRequest: function (data) {
                        return data;
                    }
                }).success(uploadComplete).error(uploadFailed);
            };

            function uploadComplete(data, status, headers, config) {
                $scope.filesToUpload = null;
                var fileInput = $('#fileInput');
                fileInput.replaceWith(fileInput = fileInput.clone(true));
                console.log(data);
            }

            function uploadFailed(data, status, headers, config) {
                console.log('Upload failed!');
            }

        });

        angular.element(document).ready(function () {
            angular.bootstrap(document.getElementById('appRoot'), ['app']);
        });
    </script>
</body>
</html>