Question

我正在使用angularJS的ng-flow在我的应用中上传img。问题是我成功上传了文件流，我无法将文件发送到node.js并将其保存到mongoDb。

代码（FrontEnd）（HTML）：

 <div class="circle-photo-container" flow-init="saveImage($flow)" flow-files-submitted="saveImage($flow)"   flow-file-success="saveImage($flow)" flow-attrs="{accept:'image/*'}">
                <div class="photo-container" >
                    <div ng-hide="$flow.files.length" class="circle-photo">
                        <div class="content">
                        </div>
                    </div>
                    <img ng-show="$flow.files.length" flow-img="$flow.files[0]" width="100" height="100" style="margin-left: 37%">
                </div>
                <div class="photo-upload-container" flow-btn>
                    <i ng-hide="$flow.files.length" class="fa fa-2x fa-camera upload-button"></i>
                </div>
            </div>

JS：

$scope.saveImage = function(flow){
console.log('hello')
            if(flow){
            var abc = !!{png:1,gif:1,jpg:1,jpeg:1}[flow.files[0].getExtension()]
            if(abc == true){
                $scope.groupData.picURL = flow.files[0];
                $scope.img = flow.files.length;
            }else{
                flow.cancel()
            }
            }
        }

我在flow.files [0]和$ scope.groupData.picURL中有文件对象。现在我可以向服务器发出POST请求，然后将其保存到mongoDB。请帮助解释示例代码

Answer 1

问题是你实际上根本没有阅读文件，你只是检索文件对象。您需要使用FileReader对象来读取数据，以便将其传递给服务器。我已经设置了一个函数，它返回FileReader对象，该对象将从图像中获取结果数据。您可以在现有的保存功能中调用该功能。

var getFileReader = function( $scope ) {

    var fileReader = new FileReader();

    fileReader.onloadend = function() {

        $scope.img = fileReader.result;

    }

    return fileReader;
};

然后在你的函数调用中：

$scope.saveImage = function(flow){

        if(flow){
            var abc = !!{png:1,gif:1,jpg:1,jpeg:1}[flow.files[0].getExtension()]

            if(abc == true){
                var fileReader = getFileReader( $scope ),
                    file = flow.files[0];

                 fileReader.readAsDataURL(file);

                 $scope.$apply();

            }else{
                flow.cancel()
            }
      }

 }

使用ng-flow获取文件时，如何将文件发送到node.js和后端

1 个答案: