Angular文件上传- cancelItem方法不起作用

Nervgh Angular File Upload - cancelItem method not working

本文关键字：cancelItem 方法不起作用文件 Angular 更新时间：2023-09-26

这是我的html代码:

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

这是angular代码:

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');
        };

我的上传。onBeforeUploadItem有条件if((item._file.type!)= "/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方法?因为尽管条件匹配，项目的上传仍然成功地继续。请帮助

this.cancelItem(item)将取消正在进行的上传。

你需要在上传文件之前检查条件。

例如:

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

然后在控制器中有一个函数用于验证想要验证的内容成功后调用uploadItem方法并传入文件item:

    $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方法之前验证您想要的内容。