Angularjs如何获取文件扩展名?

时间:2017-07-18 08:26:01

标签: javascript angularjs promise angular-promise

您好我正在开发angularjs应用程序。我正在做文件上传模块。我正在尝试验证文件。我只想上传xlsx或xls文件。我已经开发了指令和工厂方法来上传文件,如下所示。

myapp.directive('fileModel', ['fileUploadExcel', function (fileUploadExcel) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind("change", function (evt) {
                fileUploadExcel.pendingFiles[attrs.fileModel] = evt.target.files[0];
            });
        }
    };
}]);

以下是我的控制器。

 $scope.upload = function (filename) {
 fileUploadExcel.doUpload().success(function (success) {
 }).error(function (error) {
});

以下是我的工厂代码。

myapp.factory('fileUploadExcel', ['$http', '$cookieStore', 'cfg', function ($http, $cookieStore, cfg) {
    var LoginID = $cookieStore.get("LoginID");
    var baseurl = cfg.Baseurl;
    var fileuploadurl = baseurl + 'api/Customer/BulkUploadVehicle/';

    var service = {
        uploadUrl: fileuploadurl,
        pendingFiles: {},
        doUpload: doUpload
    };
    return service;
    function doUpload() {
        var filename;
        var files = new FormData();
        files.append('LoginID', LoginID);
        angular.forEach(this.pendingFiles, function (value, index) {
            filename = value.name;
            files.append(index, value);
        });
        var extn = filename.split(".").pop();
        if (extn == 'xlsx' || extn == 'xls') {
            return $http.post(this.uploadUrl, files, {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined
                }
            })
        }
        else
        {
            return false;
        } 
    }
}]);

我能够成功获得成功。当我的文件是excel类型时,我的代码工作正常。每当我上传excel以外我都会收到错误。我写过返回false。这不适用于此。我应该返回别的东西。我可以知道在其他情况下我应该写些什么吗?有人可以帮我从这里出去吗?任何帮助,将不胜感激。谢谢。

3 个答案:

答案 0 :(得分:3)

doUpload()返回false时会引发错误。由于false是布尔值而非承诺,因此无法定义.success()

我建议您在文件不是excel文件时返回被拒绝的承诺,而不是返回falsereturn $q.reject("File type not supported: " + extn);

答案 1 :(得分:2)

您返回不同的类型:

成功后,您在工厂返回$ http承诺,这样您就可以致电成功&控制器中的错误功能:

fileUploadExcel.doUpload().success() 存在!

但是如果错误,你在工厂中返回false,在这种情况下这是一个布尔值而不是$ http的承诺,所以你不能使用成功&错误功能。

fileUploadExcel.doUpload().success() 不存在并返回错误

当然一个解决方案是检查返回值是否为false并继续你的代码,但是我建议通过解决它总是一个承诺,如果成功并且在错误时拒绝它,所以承诺链是一个没破。

PS:$ http是一个修改过的承诺,为什么他们有成功&错误,但我建议使用vanilla promise并使用.then()

var deferred = $q.defer();

if (extn === 'xlsx' || extn === 'xls') {
    $http.post(this.uploadUrl, files, {
        transformRequest: angular.identity,
         headers: {
             'Content-Type': undefined
         }
    }).success(function(success) {
        deferred.resolve(success);
    }).error(function(error) {
        deferred.reject(error);
    });
} else {
    deferred.reject('File format not supported');
}
return deferred.promise;

和您的控制人员:

$scope.upload = function (filename) {
    fileUploadExcel.doUpload().then(function (success) {
        //success
    }, function (error) {
        //error
    });
}

答案 2 :(得分:1)

尝试这样做?

$scope.upload = function (filename) {
  var promise = fileUploadExcel.doUpload(); //gets promise object in a variable
  if(promise){ // if variable is not false or null, handle resolution
     promise.success(function (success) { }).error(function (error) {});
  }
}

或者您可以在工厂的null中返回else并进行空检查。上面的代码将保持不变。