Question

我在我的代码中遇到问题，我有一个员工信息更新页面，其中包含一个照片上传器，我的问题是当有人上传大照片时，让我们说3mb什么都没有等待上传完成并且个人资料图片获取破碎。这是我的代码，html方：

<md-input-container flex>
    <fieldset>
        <div>
            <img data-ng-src="{{imageURL}}" alt="{{user.displayName}}"
                 class="user-profile-picture">
        </div>

        <div data-ng-hide="uploader.queue.length">
            <input aria-label="Upload" type="file" nv-file-select uploader="uploader" data-ng-model="contacto.profileImageURL" multiple>
        </div>
        <div class="md-actions" layout="row" layout-align="end center"
             data-ng-show="uploader.queue.length">
            <md-button data-ng-click="cancelUpload();">Cancelar</md-button>
            <!-- <md-button class="md-primary" data-ng-click="uploadProfilePicture();">Ok</md-button> -->
        </div>
    </fieldset>
</md-input-container>

控制器：

   // Create file uploader instance
    $scope.uploader = new FileUploader({
        url: 'api/users/picture'
    });

    // Set file uploader image filter
    $scope.uploader.filters.push({
        name: 'imageFilter',
        fn: function (item) {
            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }
    });

    // Called after the user selected a new picture file
    $scope.uploader.onAfterAddingFile = function (fileItem) {
        if ($window.FileReader) {
            var fileReader = new FileReader();
            fileReader.onload = function (fileReaderEvent) {
                $timeout(function () {
                    $scope.imageURL = fileReaderEvent.target.result;
                }, 0);
            };

            fileReader.readAsDataURL(fileItem._file);
            console.log('donde');
        }
    };

    // Called after the user has successfully uploaded a new picture
    $scope.uploader.onSuccessItem = function () {
        console.log('salio?');
        // Show success message
        $scope.success = true;

        // Clear upload buttons
        $scope.cancelUpload();
    };

    // Called after the user has failed to uploaded a new picture
    $scope.uploader.onErrorItem = function (fileItem, response) {
        // Clear upload buttons
        $scope.cancelUpload();

        // Show error message
        $scope.error = response.message;
    };

    // Change user profile picture
    $scope.uploadProfilePicture = function () {
        // Clear messages
        console.log('image upload fired!');
        $scope.success = $scope.error = null;

        // Start upload
        $scope.uploader.uploadAll();
    };

    // Cancel the upload process
    $scope.cancelUpload = function () {
        $scope.uploader.clearQueue();
        $scope.imageURL = $scope.contacto.profileImageURL;
    };

我找不到让客户端等待上传完成的方法。

Answer 1

所以我猜测用户提交信息之后会有一个提交按钮，如果有，那么就用ng-disabled

<button ng-disabled="uploadwait" ng-click="submit()">Submit</button>

然后在控制器

$scope.uploadwait=false;//intially nothing is getting uploaded
$scope.uploader.onAfterAddingFile = function (fileItem) {
        $scope.uploadwait=true;//user starts waiting
        if ($window.FileReader) {
            var fileReader = new FileReader();
            fileReader.onload = function (fileReaderEvent) {
                $timeout(function () {
                    $scope.imageURL = fileReaderEvent.target.result;
                }, 0);
            };

            fileReader.readAsDataURL(fileItem._file);
            console.log('donde');
        }
    };

    // Called after the user has successfully uploaded a new picture
    $scope.uploader.onSuccessItem = function () {
        $scope.uploadwait=false;//upload finished
        console.log('salio?');
        // Show success message
        $scope.success = true;

        // Clear upload buttons
        $scope.cancelUpload();
    };

在AngularJS中上传图片

1 个答案: