C# 如何集成AngularJS上传文件和ServiceStack

有人能帮我把ServiceStack和这个AngularJS上传文件集成在一起吗

我不知道从哪里开始！Post（流文件）

谢谢

您必须使用它的AngularJs侧。对于servicestack实现，只需使用单个字段创建一个请求DTO，如

public Byte[]postData{get；set；}

，然后编写服务的后期实现以保存文件

---

有关使用servicestack上载文件的信息，请参见，例如，查看以下场景，在系统中为用户保存配置文件图片： 党卫军方面:

控制器内angularjs中的客户端

$scope.changeProfilePicture = function ($data) {
  // some success messsage to the user
 };

$scope.onFileSelect = function ($files) {
        //$files: an array of files selected, each file has name, size, and type.
        for (var i = 0; i < $files.length; i++) {
            var $file = $files[i];
            $http.uploadFile({
                url: '/yourServiceStackUrl', 
                // headers: {'optional', 'value'}
                //data: { myObj: $scope.myModelObj },
                file: $file
                }).progress(function (evt) {
                    $scope.previewLoading = true;
                    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                }).success(function (dataImg, status, headers, config) {
                    // file is uploaded successfully
                    $rootScope.user.ProfilePicture = dataImg;

                   // to fix IE not updating the dom
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }

            });
        }
    };

$scope.changeProfilePicture=函数（$data）{
//向用户发送一些成功消息
};
$scope.onFileSelect=函数（$files）{
//$files：选定文件的数组，每个文件都有名称、大小和类型。
对于（变量i=0；i<$files.length；i++）{
var$file=$files[i]；
$http.uploadFile({
url:“/yourServiceStackUrl”，
//标题：{'optional'，'value'}
//数据：{myObj:$scope.myModelObj}，
文件：$file
}).进度（功能（evt）{
$scope.previewLoading=true；
log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
}).success（函数（dataImg、状态、标题、配置）{
//文件已成功上载
$rootScope.user.ProfilePicture=dataImg；
//修复IE不更新dom的问题
如果（！$scope.$$phase）{
$scope.$apply（）；
}
});
}
};

在您看来，您需要调用您的指令：

<input type="file" id="changeImage" data-upload-file="/pathToSaveThePicture" data-upload-success="changeProfilePicture($data)" class="file" />

指令代码：

directive.uploadFile = function ($rootScope, $parse, $log) {
    function handleError(json) {
        var data = angular.fromJson(json);
        if (data.ResponseStatus) {
            $rootScope.notification.errors = [];
            $rootScope.notification.visible = true;
            $rootScope.notification.listdisplay = false;
            if (data.ResponseStatus.Errors != null && data.ResponseStatus.Errors.length > 0) {
              // log errors
             } 

        }
    }

    return {
        restrict: "A",
        scope: {
            callback: "&uploadSuccess"
        },
        link: function (scope, element, attribute) {

                element.bind("change", function (event) {
                var files = event.target.files;
                for (var i = 0, length = files.length; i < length; i++) {
                    var data = new FormData();
                    var xhr = new XMLHttpRequest();
                    data.append('file', files[i], files[i].name);
                    xhr.open('POST', attribute.mseUploadFile);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var result = xhr.responseText;

                            if (scope.callback) {
                                scope.$apply(function () {
                                    scope.callback({ $data: result });
                                });
                            }

                        }
                        else if (xhr.readyState == 4 && xhr.status == 400) {
                            scope.$apply(function () {
                                // handle xhr error
                            });

                        }
                    };
                    xhr.send(data);
                }
            });
        }
    };
};

directive.uploadFile=function（$rootScope，$parse，$log）{
函数handleError（json）{
var data=angular.fromJson（json）；
if（data.ResponseStatus）{
$rootScope.notification.errors=[]；
$rootScope.notification.visible=true；
$rootScope.notification.listdisplay=false；
if（data.ResponseStatus.Errors！=null&&data.ResponseStatus.Errors.length>0）{
//日志错误
} 
}
}
返回{
限制：“A”，
范围：{
回调：“&上传成功”
},
链接：函数（范围、元素、属性）{
元素绑定（“更改”，函数（事件）{
var files=event.target.files；
for（var i=0，length=files.length；i

otehr选项是搜索上传文件指令，github中有一些指令，这取决于您的需要

---

我的两分钱

非常感谢佩德罗！这对我很有用！谢谢你，普拉尚特！非常有趣的链接！这对我也有帮助！

directive.uploadFile = function ($rootScope, $parse, $log) {
    function handleError(json) {
        var data = angular.fromJson(json);
        if (data.ResponseStatus) {
            $rootScope.notification.errors = [];
            $rootScope.notification.visible = true;
            $rootScope.notification.listdisplay = false;
            if (data.ResponseStatus.Errors != null && data.ResponseStatus.Errors.length > 0) {
              // log errors
             } 

        }
    }

    return {
        restrict: "A",
        scope: {
            callback: "&uploadSuccess"
        },
        link: function (scope, element, attribute) {

                element.bind("change", function (event) {
                var files = event.target.files;
                for (var i = 0, length = files.length; i < length; i++) {
                    var data = new FormData();
                    var xhr = new XMLHttpRequest();
                    data.append('file', files[i], files[i].name);
                    xhr.open('POST', attribute.mseUploadFile);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var result = xhr.responseText;

                            if (scope.callback) {
                                scope.$apply(function () {
                                    scope.callback({ $data: result });
                                });
                            }

                        }
                        else if (xhr.readyState == 4 && xhr.status == 400) {
                            scope.$apply(function () {
                                // handle xhr error
                            });

                        }
                    };
                    xhr.send(data);
                }
            });
        }
    };
};