神经角度文件上传-cancelItem方法不起作用

Question

这是我的html代码：

<input type="file" nv-file-select="" options="{ photoType: 'studentPic' }" uploader="uploader" />

这是角度代码：

var uploader = $scope.uploader = new FileUploader({
            url: 'badges/photos',
            autoUpload: true
        });

        // FILTERS

        uploader.filters.push({
            name: 'customFilter',
            fn: function (item /*{File|FileLikeObject}*/ , options) {                
                return this.queue.length < 10;
            }
        });

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/ , filter, options) {
            console.info('onWhenAddingFileFailed', item, filter, options);
        };
        uploader.onAfterAddingFile = function (fileItem) {
            console.info('onAfterAddingFile', fileItem);
        };
        uploader.onAfterAddingAll = function (addedFileItems) {
            console.info('onAfterAddingAll', addedFileItems);
        };
        uploader.onBeforeUploadItem = function (item) {
            console.log("item before uploading:",item._file.type);
            console.log("item before uploading:",item._file.size);
            if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
                console.log("in if of before");
                this.cancelItem(item);
            }            
            console.log(item.photoType);
            var filename = generateUUID();
            if (item.photoType === 'studentPic') {
                $scope.pic = filename;
            }
            if (item.photoType === 'pickupPerson1Pic') {
                $scope.pickupPerson1Pic = filename;
            }
            if (item.photoType === 'pickupPerson2Pic') {
                $scope.pickupPerson2Pic= filename;
            }
            item.formData.push({
                filename: filename
            });
            console.info('onBeforeUploadItem', item);
        };
        uploader.onProgressItem = function (fileItem, progress) {
            console.info('onProgressItem', fileItem, progress);
        };
        uploader.onProgressAll = function (progress) {
            console.info('onProgressAll', progress);
        };
        uploader.onSuccessItem = function (fileItem, response, status, headers) {
            if (fileItem.photoType === 'studentPic') {
                angular.element('#picPreview').attr("src", response.url);
            }
            if (fileItem.photoType === 'pickupPerson1Pic') {
                angular.element('#pickupPerson1PicPreview').attr("src", response.url);
            }
            if (fileItem.photoType === 'pickupPerson2Pic') {
                angular.element('#pickupPerson2PicPreview').attr("src", response.url);
            }
            console.info('onSuccessItem', fileItem, response, status, headers);
        };
        uploader.onErrorItem = function (fileItem, response, status, headers) {
            console.info('onErrorItem', fileItem, response, status, headers);
        };
        uploader.onCancelItem = function (fileItem, response, status, headers) {
            console.info('onCancelItem', fileItem, response, status, headers);
        };
        uploader.onCompleteItem = function (fileItem, response, status, headers) {
            console.info('onCompleteItem', fileItem, response, status, headers);
        };
        uploader.onCompleteAll = function () {
            console.info('onCompleteAll');
        };

我的uploader.onBeforeUploadItem具有条件if（（item._file.type！=“ image / png” && item._file.type！=“ image / jpeg”）|| item._file.size> 102400），如果成功我调用了this.cancelItem（item）方法。

 uploader.onBeforeUploadItem = function (item) {
                console.log("item before uploading:",item._file.type);
                console.log("item before uploading:",item._file.size);
                if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
                    console.log("in if of before");
                    this.cancelItem(item);
                }            
                console.log(item.photoType);
                var filename = generateUUID();
                if (item.photoType === 'studentPic') {
                    $scope.pic = filename;
                }
                if (item.photoType === 'pickupPerson1Pic') {
                    $scope.pickupPerson1Pic = filename;
                }
                if (item.photoType === 'pickupPerson2Pic') {
                    $scope.pickupPerson2Pic= filename;
                }
                item.formData.push({
                    filename: filename
                });
                console.info('onBeforeUploadItem', item);
            };

现在我错误地调用了cancel Item方法吗？ 因为尽管条件匹配，但项目的上传仍然成功进行。 请帮忙

Answer 1

this.cancelItem（item）将取消已经进行的上传。

上传文件之前，您需要检查条件。

因此，例如：

<button type="button" id="upLoadFileButton" data-ng-click="validateStuffBeforeUpload(item)">Upload File</button>

然后，在您的控制器中，您将具有验证所需验证的函数，然后在调用成功时调用uploadItem方法并传递文件项：

    $scope.validateStuffBeforeUpload = function (fileItem) {
            if((item._file.type!="image/png" && item._file.type!="image/jpeg") || item._file.size>102400){
                console.log("in if of before");
            } else {
                uploader.uploadItem(fileItem);
            }
        };

或该方法的某种变体……无论如何，您都需要在调用uploadItem方法之前验证所需的内容。