在angular cordova app中的一个请求中发布多个文件

时间:2016-04-12 15:46:03

标签: javascript android angularjs cordova

搜索解决方案的每个位置,因为我的应用程序联系人的后端需要在一个请求中发布所有文件。

我目前的代码: - > -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在单个请求中上传多个文件?

1 个答案:

答案 0 :(得分:2)

因为我没有得到答案,而且还有几个赞成票,这就是我最终解决这个问题的方法。

请注意我使用angularjs 1.x

  1. 在我的服务中,我添加了一个函数来将文件附加到FormData对象。
  2. 在控制器中我使用$ http。
  3. 提交此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: - )