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

How to show files already stored on server with Dropzone in Angularjs

本文关键字：存储 服务器 文件 Dropzone Angularjs 显示      更新时间：2023-09-26

我使用此指令在页面中呈现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);
    });
  };
});

在我的控制器中使用以下代码：

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函数？

我解决了这个问题：

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

在控制器中：

$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>
相关文章：