AngularJS - 如何读取图像文件的数据？答案

【问题标题】：AngularJS - how to read a image file's data?AngularJS - 如何读取图像文件的数据？
【发布时间】：2015-12-30 05:37:11
【问题描述】：

我想将image 数据发送到后端。为此，我尝试读取文件（图像）。但我出现了一个错误：

Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

如何解决它。或者读取图像文件的正确方法是什么？这是我的“指令”

var userPhotoUpload = function () {

    return {

        link : function (scope, element, attrs) {

            var photoInput = element.find('.uploadField');
            var r = new FileReader();

            element.on('click', function () {

                photoInput[0].click();

            });

            photoInput.on('change', function ( e ) {

                var data = event.target.result;
                r.readAsArrayBuffer(photoInput[0]);

                // console.log( "data", data, e.target.result );

            })

            // r.onloadend = function(e){

   //               var data = e.target.result;
   //               console.log( "let data load", data );
   //           //send you binary data via $http or $resource or do anything else with it
    //      }

        }

    }

}

angular.module("tcpApp")
    .directive('userPhotoUpload', userPhotoUpload );

【问题讨论】：

标签： angularjs angular-directive

【解决方案1】：

为了在 http 请求上上传数据，您可以通过不同的方式进行作为文件，作为字节数组，二进制，但简单的方法是使用以下方法作为文件是来自输入的文件请参阅here 如何将指令与 documendata 变量

绑定

        $http(              
                { method: 'POST',
                  url: 'public/Game/store',
                  // headers:   {    'content-type': 'multipart/form-data'},
                  data: documentData
         });

【讨论】：

【解决方案2】：

你可以通过ng-flow的图库上传来做到这一点

https://flowjs.github.io/ng-flow/

【讨论】：