Imbrication承诺上传文件angularJS

时间:2016-09-01 17:44:07

标签: javascript angularjs http promise

我被困了好几个小时才能将文件数组上传到我的服务器。我需要上传这个数组,然后使用这个文件数组上传一个对象作为参数。我的服务器将服务器端上传的文件名称作为响应发回给我。我对promise的使用感到困惑,因为我得到了错误:

 Cannot read property 'then' of undefined

这是我的代码:

function uploadImage(formData){

 var deferred = $q.defer();
 Image.aadd(formData).then(function(data){
    deferred.resolve(data.data.fileName);
    return deferred.promise;
  });

 }

function uploadImages(gallery){

var myGallery = [];
angular.forEach(gallery, function (image) {
    var formData = new FormData();
    formData.append('file', image);

    var promise = uploadImage(formData);
    promise.then(function(data){
        myGallery.push(data.fileName);
    });

});

var mygallery = uploadImages($scope.stock.gallery);

// Then use mygallery ["imgName1.png","imgName2.jpg", ... ]

1 个答案:

答案 0 :(得分:1)

uploadImage()应该返回一个承诺,以便拥有then()函数。此外,您可以简化直接返回值的承诺。

  

当您在then()内返回一个值时,该值将传递给第一个链式承诺。

function uploadImage(formData) {
    return Image.add(formData).then(function(data) {
        return data.data.fileName;
    });
}

然后,您应该重新组织uploadImages()功能。我建议采用以下方式。

function uploadImages(gallery) {
    var uploadPromises = gallery.map(function(image) {
        var formData = new FormData();
        formData.append('file', image);
        return uploadImage(formData);
    });

    return Promise.all(uploadPromises);
}

uploadImages($scope.stock.gallery).then(function(mygallery) {
    // then you should use mygallery
});

说明:您应该将所有上传承诺放入数组中。使用Promise.all,您可以抓住所有上传完成的时刻。然后,通过then()创建一个包含所有文件名的数组。