Question

我应该使用哪个模型从客户端接收js数据（包括File对象和字符串）？还是应该为asp.net Core服务器中的File对象使用哪种数据类型？

Answer 1

使用ViewModel接收文件和字符串，然后直接提交表单以发布这些数据。注意：要发送文件时，请在enctype="multipart/form-data"中添加Form

 public class TestViewModel
{
    public string Name { get; set; }
    public IFormFile file { get; set; }
}

<div class="row">
  <div class="col-md-4">
    <form asp-action="UploadFile"  enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name"  class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        <div class="form-group">
            <input asp-for="file" class="form-control" />
        </div>

        <div class="form-group">
            <input type="submit" id="btnSubmit" value="Create" class="btn btn-default" />
        </div>
    </form>
  </div>
   <span id="result"></span>
</div>

如果要通过js发送表单数据，可以添加id="fileUploadForm"并尝试如下所示的javascript

@section Scripts
{
<script type="text/javascript">

    $(document).ready(function () {

        $("#btnSubmit").click(function (event) {

            //stop submit the form, we will post it manually.
            event.preventDefault();

            // Get form
            var form = $('#fileUploadForm')[0];

            // Create an FormData object 
            var data = new FormData(form);

            // If you want to add an extra field for the FormData
            data.append("CustomField", "This is some extra data, testing");

            // disabled the submit button
            $("#btnSubmit").prop("disabled", true);

            $.ajax({
                type: "POST",
                //enctype: 'multipart/form-data',
                url: "/Home/UploadFile",
                data: data,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function (data) {

                    $("#result").text(data);
                    console.log("SUCCESS : ", data);
                    $("#btnSubmit").prop("disabled", false);

                },
                error: function (e) {

                    $("#result").text(e.responseText);
                    console.log("ERROR : ", e);
                    $("#btnSubmit").prop("disabled", false);

                }
            });

        });

    });
</script>
}

控制器

 [HttpPost]
 public async Task<ActionResult> UploadFile(TestViewModel data)
  { }

Answer 2

我应该使用哪个模型来接收js数据，包括File对象和字符串

ASP Net Core为此具有IFormFile容器。数据作为流内部保存。

您的字符串和文件的动作签名看起来像

public IActionResult Action(IFormFile file, string name) { }

请注意，参数名称必须与您在javascript中使用的表单数据名称匹配。即

const fd = new FormData()
fd.append('file' , file)
fd.append('name', 'some string')

此documentation提供了完整的用法示例。

如何在asp.net核心中接收包含数据的文件？

2 个答案: