Question

我使用angular-file-upload上传文件，我正在编写一个过滤器，我需要 从所选的csv文件中删除标题上传＆amp;将它们与来自某些API 的标题相匹配。我能够从csv和amp; API并比较它们，但上传器回调函数（如uploader.onWhenAddingFileFailed(), uploader.onAfterAddingFile()）不等待我的过滤器执行，它们是异步执行的。

因此， 上传器回调函数应该等到我的过滤器函数执行 然后，根据响应（true / false），将会发生进一步的操作。

我目前的过滤代码是 -

uploader.filters.push({
    name: 'fileTemplateFilter',
    fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {

        var getCsvHeaders = function() {
            // $http.post(csvHeadersUrl + vm.vendorWithSearchItem.selected.vendorid + '&fileName=' + item.name)
            return $http.get('app/pages/utilities/inventoryMapper/csvHeader.csv')
                .then(function(success) {
                    vm.tableHeaders = success.data;
                    return true;
                }, function(error) {
                    vm.tableHeaders = undefined;
                    return false;
                }).catch(function(e){
                    return false;
                });
        }

        var getFileHeaders = function() {
            var r = new FileReader();
            r.onload = function(e) {
                var contents = e.target.result;
                contents = contents.split(/\r\n|\n/);
                var i = 0,
                    flag = false,
                    headers;
                while (i < contents.length && flag == false) {
                    if (contents[i] != '') {
                        headers = contents[i]
                        flag = true;
                    }
                    i++;
                }
                vm.fileHeaders = headers.split(",").map(function(item) { return item.trim() && item.replace(/['"]+/g, ''); });
                return true;
            };
            r.readAsText(item);
            return false;
        }

        var isTemplateSame = function() {
            return Promise.all([getCsvHeaders(), getFileHeaders()]).then(function() {
                if(vm.fileHeaders && vm.tableHeaders) {
                    var is_same = (vm.fileHeaders.length == vm.tableHeaders.length) && vm.fileHeaders.every(function(element, index) {
                        return element === vm.tableHeaders[index];
                    });
                    return is_same == true ? true : false;
                }
            })
        }

        return Promise.resolve(isTemplateSame()).then(function(value) {
            return value;
        });
        // setTimeout(deferred.resolve, 1e3);
    }
});

在这里，我需要关注 -

1）我的过滤器读取整个csv＆amp;然后返回标题;请建议代码改进，以便只读取标题而不是整个文件。

2）在此过滤器中正确实现承诺

Answer 1

我得到了承诺实施的解决方案。我使用deferred承诺＆amp;它对我有用。此时，还发现了用于csv解析的快速解析器 - PapaParse 。

因此，我更新的过滤器如下 -

uploader.filters.push({
    name: 'fileTemplateFilter',
    fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {
        vm.tableHeaders = undefined;
        vm.fileHeaders = undefined;
        var getCsvHeaders = function() {
            // return $http.get('app/pages/utilities/inventoryMapper/csvHeader.csv')
            return $http.post(csvHeadersUrl + vm.vendorWithSearchItem.selected.vendorid + '&fileName=' + item.name)
                .then(function(success) {
                    vm.tableHeaders = success.data;
                    return vm.tableHeaders;
                }, function(error) {
                    vm.tableHeaders = undefined;
                    throw error.status + " : " + error.data;
                }).catch(function(e){
                    return false;
                });
        }

        var getFileHeaders = function() {
            var defer = $q.defer();
            Papa.parse(item, {
                worker: true,
                skipEmptyLines: true,
                step: function(results, parser) {
                    parser.abort();
                    vm.fileHeaders = results.data[0] || undefined;
                    results = null;
                    defer.resolve(vm.fileHeaders);
                },
                complete: function(results){
                    results = null;
                }
            });
            return defer.promise;
        }

        $q.all([getCsvHeaders(), getFileHeaders()]).then(function() {
            if(vm.fileHeaders && vm.tableHeaders) {
                var is_same = (vm.fileHeaders.length == vm.tableHeaders.length) && vm.fileHeaders.every(function(element, index) {
                    return element === vm.tableHeaders[index];
                });
                if(is_same == true) {
                    deferred.resolve(is_same);
                } else {
                    toastr.error('file template doesn\'t match for this file - ' + item.name + ' ...!', 'Error');
                    deferred.reject(false);
                }
            } else {
                deferred.reject(false);
            }
        }, function(error) {
            deferred.reject(error);
        })

        return deferred.promise;
    }
});

angularjs中的angular-file-upload异步过滤器

1 个答案: