如何以角度2上传base64文件

Posted 2021-04-12

我正在尝试以base64格式上传文件，但它没有奏效。我不明白什么是错的，这是抛出的错误

这是功能

private headerMedia = new Headers({"Content-Type": "application/base64"});

    uploadMedia(base64, process, id): any {        
        let ruta: string = "http://route";
        let options = new RequestOptions({headers: this.headerMedia});       

            return this.http
            .post(ruta, base64, options)
            .toPromise()
            .then(() => base64)
            .catch(this.handleError);

    }

答案

我认为这种方法可以帮到你。

在Angular项目中创建目录

var app = angular.module('myApp', []);

app.directive('ngFileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind("change", function (changeEvent) {
                var values = [];

                for (var i = 0; i < element[0].files.length; i++) {
                    var reader = new FileReader();

                    reader.onload = (function (i) {
                        return function(e) {
                            var value = {
                                lastModified: changeEvent.target.files[i].lastModified,
                                lastModifiedDate: changeEvent.target.files[i].lastModifiedDate,
                                name: changeEvent.target.files[i].name,
                                size: changeEvent.target.files[i].size,
                                type: changeEvent.target.files[i].type,
                                data: e.target.result
                            };
                            values.push(value);
                        }

                    })(i);

                    reader.readAsDataURL(changeEvent.target.files[i]);
                }


                scope.$apply(function () {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    }
}]);

在输入标记中使用ng-file-model

 <input accept="image/*" ng-file-model="photo" type="file" multiple/>

现在使用$ http.post上传它

 $http.post('/api/uploadPic',{photo:photo}).
    success(function (data, status) {
       //perform action after upload
    });

我希望这对你有帮助