![](/img/trans.png)
[英]Making Just One POST Request When Multiple Values Are Received in Angular App
[英]post multiple files in one request in angular cordova app
從我的應用程序聯系人的后端需要在一個請求中發布所有文件,搜索解決方案的每個位置。
我目前的代碼: - > -angularjs 1.5.3-
app.service('siUpload',function($q){
//...
this.upload(imageURI,url){
var deferred = $q.defer();
//.. etc.. options and other stuff
var ft = new FileTransfer();
ft.upload(imageURI, encodeURI(url),deferred.resolve,deferred.reject);
return deferred.promise
}
})
在控制器中我可以循環選擇的文件並逐個上傳。
angular.forEach($scope.files,function(f){
siUpload.upload(f.url,$server+'blog/'+e.grouping+'/file')
});
這很好用,但服務器需要在名稱file[]
下的單個請求中發送所有文件。
在我使用angular lib ngFileUpload之前,由於輸入類型=文件中的webview錯誤,它不再適用於android 4.4.2 :(。
所以有沒有cordova-file-transfer可以在單個請求中發送多個文件? 甚至使用本機xhr在單個請求中上傳多個文件?
因為我沒有得到答案,並且幾個贊成票,這就是我最終解決這個問題的方法。
注意我正在使用angularjs 1.x.
碼:
app.service('siUpload',function(){
var formData = new FormData();
var collection = [];
var options = {
quality: 80,
destinationType: Camera.DestinationType.FILE_URL,
sourceType: Camera.PictureSourceType.CAMERA
};
this.pickFiles = function(){
var defer = $q.defer();//Create a PROMISE
//openup Camera to Capture files
navigator.camera.getPicture(
function(imageURI){
//add captured file to FormData
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
//add to collection for thumbnail views
collection.push(file.nativeURL);
reader.onloadend = function(fileReadResult) {
var data;
data = new Uint8Array(fileReadResult.target.result);
//add to formData for submitting
formData.append('file[]', new Blob([data], {
type: file.type
}), file.name);
//return [0]=>collection of thumbnails [1]=>formData to be posted
defer.resolve([collection,formData]);
};
defer.notify('got image, appending it to formData');
reader.readAsArrayBuffer(file);
});
});
},
function(message){
defer.reject('Camera rejected'+message);
},options);
return defer.promise;
}
使用此功能我可以在我的控制器中觸發
$scope.capture = function(){
siUpload.pickFile().then(
function(r){
//r contain thumbnails and form data
$scope.thumbnails = r[0];
var fd = r[1];
angular.forEach($scope.post,function(val,key){
fd.append(key,val); //adding extra paramters to the post request
});
//POSTING All FILES and data in one request :)
$http.post('API://blog', fd, {
headers: {'Content-Type': undefined },
transformRequest: angular.identity
});
});
}
希望這有助於未來的googlers :-)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.