Question

我尝试了很多教程，但没有找到成功的结果！我想将一些带有图像的数据发送到asp web api。我现在得到的是：http://www.encodedna.com/angularjs/tutorial/angularjs-file-upload-using-http-post-formdata-webapi.htm 我现在可以使用该教程保存图像，但是当我尝试使用该图像发送一些值时，它会返回内部服务器错误＆＃39 ;;

我的网页api：

[HttpPost]
    [Route("api/PictureAttApi/savepic")]
    public string savepic()
    {



        int iUploadedCnt = 0;

        // DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.
        string sPath = "";
        sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/");

        System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

        // CHECK THE FILE COUNT.
        for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)
        {
            System.Web.HttpPostedFile hpf = hfc[iCnt];

            if (hpf.ContentLength > 0)
            {
                // CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)
                if (!File.Exists(sPath + Path.GetFileName(hpf.FileName)))
                {
                    // SAVE THE FILES IN THE FOLDER.
                    hpf.SaveAs(sPath + Path.GetFileName(hpf.FileName));
                    iUploadedCnt = iUploadedCnt + 1;
                }
            }
        }

        // RETURN A MESSAGE.
        if (iUploadedCnt > 0)
        {
            return iUploadedCnt + " Files Uploaded Successfully";
        }
        else
        {
            return "Upload Failed";
        }
    }

我的js：

 $scope.addimagefunc=function(){

//    var data = new FormData($('form')[0]);

    var data = new FormData();
    data.append('picture', $scope.picture);
    data.append('FatherName', '5555');

        $.ajax({
            type: "POST",
            url: dataUrl + 'PictureAttApi/savepic',    // CALL WEB API TO SAVE THE FILES.
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,         // PREVENT AUTOMATIC DATA PROCESSING.
            cache: false,
            data: data,                 // DATA OR FILES IN THIS CONTEXT.
            success: function (data, textStatus, xhr) {
                $('#output').text(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + ': ' + errorThrown);
            }
        });

}

我的指示：

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}])

我的HTML：

  <form action="">
    <div class="col-md-6">
        <label for="EmpPicture" class="">Upload Image:</label>
        <input type="file" id="inputDeImg" ng-model="EmpPictureAdd" name="EmpPicture" file-model="picture" accept="image/*" />

    </div>
    <div class="col-md-6">
        <img class="img-rounded" src="#" id="dImg" />
    </div>

  <input class="btn btn-info" ng-click="addimagefunc()" value="add" />

    <p id="output"></p>
</form>

但是当我添加这个：

[HttpPost]
    [Route("api/PictureAttApi/savepic")]
     public string savepic(Member m)
        {

}

它返回内部错误：我的任务是没有任何参数（HTTPPostrdFileBase）如何保存图像？如何在apiController中传递一些带有图像的数据（如$ scope.FatherName）？

Answer 1

对于简单数据，您可能会发现在uri中传递它是最容易的

所以在javascript方面，将$ ajax中的url更改为此

url: dataUrl + 'PictureAttApi/savepic?FatherName=55555'

服务器端：

public string savepic([FromUri]string FatherName){

Answer 2

使用您共享的链接中的示例，您可以＆＃34;追加＆＃34;对＆＃34; formdata＆＃34;的更多价值。例如，

控制器的

$scope.getTheFiles = function ($files) {
angular.forEach($files, function (value, key) {
    formdata.append(key, value);                    // IMAGES 
    formdata.append('fatherName', 'somevalue');    // SOME OTHER DATA
});

};

Web API

使用

读取Web API中的值

System.Web.HttpContext.Current.Request.Form;

这样您就可以同时上传多个文件并传递一些值。

使用angularjs和asp .net mvc web api上传一些数据的图片

2 个答案: