Question

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

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

如何解决它。或者读取图像文件的正确方法是什么？这是我的'指令＆＃39;

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

Answer 1

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

绑定

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

Answer 2

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

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

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

2 个答案: