使用 AngularJs 上传文件/图像答案

【问题标题】：Upload file/image with AngularJs使用 AngularJs 上传文件/图像
【发布时间】：2015-06-29 21:07:03
【问题描述】：

我想用 AngularJs 上传一个文件（所以图像）...我读到 AngularJs 不支持标签输入类型 =“文件”所以我读到我需要自定义指令...我想获取输入文件并将其用于在同一页面 html 上显示预览（缩略图），并在控制器中将文件上传到服务器...在我的页面 html 中，我编写了以下代码：

<body ng-controller="myController">

<h1>Select file</h1>
<input type="file" file-model="myFile" />
<div>
     <h2>File content is:</h2>
     <pre>{{ content }}</pre>
</div>

</body>

我写了这个指令：

var modulo = angular.module('myApp', []);


modulo.directive('fileModel', function () {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.on('change', function (event) {
                var file = event.target.files[0];
                scope.$emit("fileSelected", file);
            });            
        }
    };
});

这是我的控制器：

modulo.controller('myController', function ($scope) {

    $scope.$on('fileSelected', function (event, args) {
        $scope.content(args.file);
        console.log(args.file);
    });
});

此代码不起作用...有解决方案吗？哪里出错了？

【问题讨论】：

从您发布的代码中，它似乎缺少 ng-app 声明 - 将 ng-app 放在 body 标记上，如下所示：
我在这个例子中省略了，因为它被提供了

标签： javascript jquery angularjs file-upload angularjs-directive

【解决方案1】：

错误在你的指令中

检查一下，我在我的应用程序中使用了相同的指令

 .directive('fileModel', ['$parse', function ($parse) {
  return {
  restrict: 'A',
  link: function(scope, element, attrs) {
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;

    element.bind('change', function(){
      scope.$apply(function(){
        modelSetter(scope, element[0].files[0]);
      });
    });
  }
};
}
this is my html to 
input(type="file", file-model="myFile", accept="image/*", image="image", id='fileInput')

这是我为处理上传而创建的一个小服务

function fileUpload (file, uploadUrl) { 

var cropedImage = dataURItoBlob(file);
var fileData = new FormData(),
    uploadedImage = '';
fileData.append('fileUpload', cropedImage);

return $http({
  withCredentials: true,
  method: "POST",
  url: uploadUrl,      
  data: fileData,
  headers: {'Content-Type': undefined},
  transformRequest: angular.identity
});    

}

试试这个，它对我有用

【讨论】：

对不起，你能评论代码吗？另外，如何将文件/图像从指令传递到控制器以显示图像预览？谢谢！
@user3751473 我使用以下命令将文件/图像从指令传递到我的控制器函数 angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect) ;我的控制器 var handleFileSelect=function(selectedFile) { $scope.showCropSection = true; var file = selectedFile.currentTarget.files[0]; var reader = new FileReader(); reader.onload = function (selectedFile) { $scope.$apply(function($scope){ $scope.myImage = selectedFile.target.result; }); }; reader.readAsDataURL(文件); };

【解决方案2】：

您应该执行以下操作来显示图像：

<pre><img data-ng-src="data:image/png;base64,{{ content }}"/></pre>

为了从输入中检索数据，您应该使用自定义指令，例如this answer：

angular.module('appFilereader', []).directive('appFilereader', function($q)   
{
    var slice = Array.prototype.slice;
    return {
       restrict: 'A',
       require: '?ngModel',
       link: function(scope, element, attrs, ngModel) {
            if (!ngModel) return;

            ngModel.$render = function() {};

            element.bind('change', function(e) {
                var element = e.target;

                $q.all(slice.call(element.files, 0).map(readFile))
                    .then(function(values) {
                        if (element.multiple) ngModel.$setViewValue(values);
                        else ngModel.$setViewValue(values.length ? values[0] : null);
                    });

                function readFile(file) {
                    var deferred = $q.defer();

                    var reader = new FileReader();
                    reader.onload = function(e) {
                        deferred.resolve(e.target.result);
                    };
                    reader.onerror = function(e) {
                        deferred.reject(e);
                    };
                    reader.readAsDataURL(file);

                    return deferred.promise;
     }

 ); //change

在你的 html 中：

    <input type="file" ng-model="editItem._attachments_uri.image" 
accept="image/*" app-filereader />

【讨论】：

对不起，你能帮我写代码吗？因为它必须运行...如果我以这种方式将 un allert 定位在 directi 中，则 alert(file);我获得了 [object File]，所以我获取了文件，我可以读取名称、大小和上次修改的时间。当我使用 scope.$emit("fileSelected", file); 传递文件时我在我的控制器中使用这个值......如果我尝试在我的页面 html 中显示文件，并且在我的控制台中我在控制台中获得“未定义”......为什么？谢谢！