我正在尝试.mp4通过ionic 1以角度1发布一些数据的文件。通过POSTMAN发布时,它可以正常工作。我正在Success = false申请。
.mp4
Success = false
在POSTMAN中 ,没有标头和数据,带有POST请求的服务url以 表单数据的形式请求http://services.example.com/upload.php正文
j_id = 4124, type = text q_id = 6, type = text u_id = 159931, type = text file = demo.mp4, type = file
在我的应用中:
$rootScope.uploadQuestion = function () { var form = new FormData(); form.append("j_id", "4124"); form.append("q_id", "6"); form.append("u_id", "159931"); form.append("file", $rootScope.videoAns.name); //this returns media object which contain all details of recorded video return $http({ method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, // also tried with application/x-www-form-urlencoded url: 'http://services.example.com/upload.php', // url: 'http://services.example.com/upload.php?j_id=4124&q_id=8&u_id=159931&file='+$rootScope.videoAns.fullPath, // data: "j_id=" + encodeURIComponent(4124) + "&q_id=" + encodeURIComponent(8) + "&u_id=" + encodeURIComponent(159931) +"&file=" + encodeURIComponent($rootScope.videoAns), data: form, cache: false, timeout: 300000 }).success(function (data, status, headers, config) { if (status == '200') { if (data.success == "true") { alert('uploading...'); } } }).error(function (data, status, headers, config) { }); }
使用base64编码添加二进制文件multi-part/form- data效率很低,因为base64编码会增加33%的额外开销。如果服务器API接受带有二进制数据的POST,请直接发布文件:
multi-part/form- data
function upload(url, file) { if (file.constructor.name != "File") { throw new Error("Not a file"); } var config = { headers: {'Content-Type': undefined}, transformRequest: [] }; return $http.post(url, file, config) .then(function (response) { console.log("success!"); return response; }).catch(function (errorResponse) { console.error("error!"); throw errorResponse; }); }
通常,$ http服务会将JavaScript对象编码为JSON字符串。使用transformRequest: []覆盖默认的转变。
transformRequest: []
angular.module("app",[]) .directive("selectNgFiles", function() { return { require: "ngModel", link: postLink }; function postLink(scope, elem, attrs, ngModel) { elem.on("change", function(event) { ngModel.$setViewValue(elem[0].files); }); } }) .controller("ctrl", function($scope, $http) { var url = "//httpbin.org/post"; var config = { headers: { 'Content-type': undefined } }; $scope.upload = function(files) { var promise = $http.post(url,files[0],config); promise.then(function(response){ $scope.result="Success "+response.status; }).catch(function(errorResponse) { $scope.result="Error "+errorRespone.status; }); }; }) <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <input type="file" select-ng-files ng-model="files"> <br> <button ng-disabled="!files" ng-click="upload(files)"> Upload file </button> <pre> Name={{files[0].name}} Type={{files[0].type}} RESULT={{result}} </pre> </body>
'Content-Type': 'multipart/form-data'
使用FormData API发布数据时,将内容类型设置为undefined:
undefined
function uploadQuestion(file) { var form = new FormData(); form.append("j_id", "4124"); form.append("q_id", "6"); form.append("u_id", "159931"); form.append("file", file); //this returns media object which contain all details of recorded video return $http({ method: 'POST', headers: { 'Content-Type': undefined ̶'̶m̶u̶l̶t̶i̶p̶a̶r̶t̶/̶f̶o̶r̶m̶-̶d̶a̶t̶a̶'̶ }, // also tried with application/x-www-form-urlencoded url: 'http://services.example.com/upload.php', data: form, ̶c̶a̶c̶h̶e̶:̶ ̶f̶a̶l̶s̶e̶,̶ timeout: 300000 ̶}̶)̶.̶s̶u̶c̶c̶e̶s̶s̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶ }).then(function(response) { var data = response.data; var status = response.status; if (status == '200') { console.log("Success"); } ̶}̶)̶.̶e̶r̶r̶o̶r̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶,̶ ̶s̶t̶a̶t̶u̶s̶,̶ ̶h̶e̶a̶d̶e̶r̶s̶,̶ ̶c̶o̶n̶f̶i̶g̶)̶ ̶{̶ }).catch(function(response) { console.log("ERROR"); //IMPORTANT throw response; }); }
当XHR API send方法发送FormData Object时,它将自动设置具有适当边界的内容类型标头。当$ http服务覆盖内容类型时,服务器将获得没有适当边界的内容类型标头。