AngularJS 1.x:文件上传失败:传输过程中文件对象未定义

时间:2017-06-11 11:49:12

标签: javascript angularjs

当我尝试通过rest / json上传文件时,出现400错误。我在文件上传休息请求期间看到我的content未定义,但它是在reader.readAsArrayBuffer之前定义的。

我尝试做的是将文件作为BASE64编码的字符串传递。我感觉我在当前的背景下没有正确地做到这一点。

以下是上传功能。

    $scope.uploadFile = function() {
        $scope.files.forEach(function(file) {
            var reader = new FileReader();
            var fileObject = {
                'documentCase': {
                    'id': successResponse.data.documentCase.id,
                    'code': successResponse.data.documentCase.code
                },
                'code': successResponse.data.documentCase.code,
                'content': reader.readAsArrayBuffer(document.getElementById(file.id).files[0]),
                'name':'hi',
                'description':'hi'
            };

            $http.post (webserviceUrl + documentCaseFileCreate, fileObject, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(function successCallback(response) {
                console.log('file transfer ok');
                console.log(response);
            }, function errorCallback(response) {
                console.error('file transfer error');
                console.log(response);
            });
        });
    };

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我不得不将post调用移动到仅在文件加载后触发的函数:

$scope.uploadFile = function(file) {
    var reader = new FileReader();
    reader.readAsBinaryString(document.getElementById(file.id).files[0]);
    reader.onload = function() {
        var fileObject = {
            'documentCase': {
                'id': successResponse.data.documentCase.id,
                'code': successResponse.data.documentCase.code
            },
            'code': successResponse.data.documentCase.code,
            'content': btoa(reader.result),
            'name':'tere',
            'description':'tere'
        };

        $http.post(webserviceUrl + documentCaseFileCreate, fileObject, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function successCallback(response) {
            uploadedFile = {
                'fileData': document.getElementById(file.id).files[0],
                'responseData': response
            };
            console.log('uploadedFile');
            console.log(uploadedFile);
            $scope.uploadedFiles.push(uploadedFile);
            $scope.files.splice(file.);
        }, function errorCallback(response) {
            console.error('file transfer error');
            console.log(response);
        });
    };
    reader.onerror = function() {
        console.error('error reading file');
    };

};