Asp.net WebApi 传递json数据以及上传文件

这篇博客主要总结了 Asp.net WebApi 项目的前后端互传json以及上传文件的方法。

主要思路
在面向服务的架构模式中，整个网站前后端耦合度低，将前端作为主体，通过ajax与后台交换json数据。

上传文件通过input[type=‘file’]来获取file，并通过FormData传给后台。

前台代码

<input type="button" id="submit" value="submit" οnclick="f2()">

<script>
    function f2() {
            var formData = new FormData();
            formData.append("name", $("#name").val());
            formData.append("age", $("#age").val());
            if ($("#pic")[0].files.length > 0) {
                formData.append("pic", $("#pic")[0].files[0]);
            }
            $.ajax({
                method: "POST",
                url: "api/User/Func2",
                data: formData,
                dataType: "json",
                contentType: false, //传文件必须！
                processData: false, //传文件必须！
                success: function (resp) {
                    console.log(resp);
                },
            });
        }
</script>

后台代码  注意文件不需要加参数。用System.Web.HttpContext.Current.Request; 获取请求的文件及参数
public JObject Func2()
    {
        JObject returnJson = new JObject();
        var request = System.Web.HttpContext.Current.Request;
        var formData = request.Form;
        string name = formData["name"];
        string age = formData["age"];
        if (request.Files.Count > 0)
        {
            var file = request.Files[0];
            var savePath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "uploadImgs/";
            if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
            file.SaveAs(savePath + file.FileName);
        }
        returnJson.Add("name", name);
        returnJson.Add("age", age);
        returnJson.Add("success", true);
        return returnJson;
    }