AngularJS - 如何读取图像文件的数据?

时间:2015-12-30 05:37:11

标签: angularjs angular-directive

我想将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 );

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您可以使用ng-flow的图库上传

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