Come pubblicare file binari con AngularJS (con DEMO di caricamento)

imansible inviare file con postazione angular

Sto cercando di pubblicare il file .mp4 con alcuni dati tramite ionico 1 con angular 1. Mentre pubblichi tramite POSTMAN, va bene e funziona. Sto ottenendo Success = false nella mia applicazione.

in POSTMAN , nessuna intestazione e dati sono sotto, Url servizio con richiesta POST http://services.example.com/upload.php corpo nei dati del modulo

 j_id = 4124, type = text q_id = 6, type = text u_id = 159931, type = text file = demo.mp4, type = file 

nella mia app:

 $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) { }); } 

RACCOMANDATO: POST File binari direttamente

La pubblicazione di file binari con dati multi-part/form-data è inefficiente poiché la codifica base64 aggiunge un ulteriore overhead del 33%. Se l’API del server accetta i POST con dati binari, pubblica direttamente il file:

 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; }); } 

Normalmente il servizio $ http codifica oggetti JavaScript come stringhe JSON . Usa transformRequest: [] per sovrascrivere la trasformazione predefinita.


DEMO di Direct POST

 angular.module("app",[]) .directive("returnFiles", 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; }); }; }) 
    
 Name={{files[0].name}} Type={{files[0].type}} RESULT={{result}}