繁体   English   中英

在angular cordova 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.

  1. 在我的服务中,我添加了一个函数来将文件附加到FormData对象。
  2. 在控制器中我使用$ http提交此FormData。

码:

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM