javascript - 如何在 Angularjs 中使用 Dropzone 显示已存储在服务器上的文件

Question

我使用此指令在页面中呈现 Dropzone.js:

angular.module('dropzone', []).directive('dropzone', function () {
  return function (scope, element, attrs) {
    var config, dropzone;

    config = scope[attrs.dropzone];

    // create a Dropzone for the element with the given options
    dropzone = new Dropzone(element[0], config.options);

    // bind the given event handlers
    angular.forEach(config.eventHandlers, function (handler, event) {
      dropzone.on(event, handler);
    });
  };
});

在我的 Controller 中使用这段代码:

angular.module('app', ['dropzone']);

angular.module('app').controller('SomeCtrl', function ($scope) {
  $scope.dropzoneConfig = {
    'options': { // passed into the Dropzone constructor
      'url': 'upload.php'
    },
    'eventHandlers': {
      'sending': function (file, xhr, formData) {
      },
      'success': function (file, response) {
      }
    }
  };
});

在 Dropzone 中显示已存储在服务器上的文件为此使用 mockFile 和 this.emit。现在如何获取 this 并运行 emit 函数？

Answer 1

我用这个解决了问题:

'use strict';

angular.module('dropzone', []).directive('dropzone', function ($timeout) {
    return {
        restrict:'AE',
        require: 'ngModel',
        link:function (scope, element, attrs, ngModel) {
            var init = function () {
                var config, dropzone;

                config = scope[attrs.dropzone];

                // create a Dropzone for the element with the given options
                dropzone = new Dropzone(element[0], config.options);


                // Display existing files on server
                if(ngModel.$viewValue !=='' && ngModel.$viewValue !==undefined){
                    var mockFile = {name: ngModel.$viewValue, size: 1234};
                    dropzone.emit("addedfile", mockFile);
                    dropzone.createThumbnailFromUrl(mockFile, "uploads/" + ngModel.$viewValue);
                    dropzone.emit("complete", mockFile);
                }

                // Form submit rest dropzone event handler
                scope.$on('dropzone.removeallfile', function() {
                    dropzone.removeAllFiles();
                });


                // bind the given event handlers
                angular.forEach(config.eventHandlers, function (handler, event) {
                    dropzone.on(event, handler);
                });
            };
            $timeout(init, 0);
        }
    }
});

在 Controller 中:

$scope.dropzoneConfig = {
        options: { // passed into the Dropzone constructor
            url: '/api/uploadimage',
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: .5, // MB
            acceptedFiles: 'image/jpeg,image/png,image/gif',
            maxFiles: 1,
        },
        'eventHandlers': {
            'removedfile': function (file,response) {
                $http({
                    method : "POST",
                    url : "/api/uploadimage/"+$scope.customer.avatar_url
                }).then(function mySucces(response) {
                    $scope.deleteMessage = response.data;
                    $scope.customer.avatar_url='';
                });
            },
            'success': function (file, response) {
                $scope.customer.avatar_url = response.filename;
            }
        }
    };

在你的 Html 中:

<div ng-if="customer.avatar_url!==undefined" ng-model="customer.avatar_url" dropzone="dropzoneConfig" class="dropzone"></div>