Asp.Net 核心 - 使用 ajax 将文件上传到数据库

Question

我正在尝试上传文件，使用 ajax 将其发送到控制器并将其保存在数据库中。没有 Ajax，它工作得很好，但是当我在控制器中提交带有 ajax 的代码时，我得到一个 0 结果并且无法将文件保存到数据库中。

这是我的代码：查看：

<form method="post" id="uploadForm" enctype="multipart/form-data" asp-action="UploadFile">
      
                <div class="k-content">
                    @(Html.Kendo().Upload()
                    .Name("files")
                    .Multiple(true)
                    .Messages(m=>m.Select("Select"))
                    .Validation(validation => validation
                    .AllowedExtensions(new string [] { ".doc", ".docx", ".pdf", ".txt"})
                    .MaxFileSize(5242880)
                    )
                    .HtmlAttributes(new { aria_label = "files"})

                    )
                    <p style="padding-top: 1em; text-align: right">
                        <button type="submit" id="uploadfile" class="btn btn-outline-primary rounded-pill">Upload</button>
                    </p>
                </div>
            </form>

ajax调用：

        $("#uploadfile").click(function (e) {
        e.preventDefault();

        var fileUpload = $("#addfile").data("kendoUpload"),
            files = fileUpload.getFiles();

        var filedata = new FormData();
        
        for (var i = 0; i < files.length; i++) {
            filedata.append(files[i].name, files[i]);
        }

        $.ajax({
            type: "POST",
            url: '@Url.Action("UploadFile")',
            contentType: false,
            processData: false,
            data: filedata,
            success: function (message) {
                alert(message);
            },
            error: function (xhr, status, error) {
                alert(error);
            },
        });

    });

和控制器，在没有 ajax 的情况下工作正常，但是当使用 Ajax 提交数据时，我得到 filedata

的 0 结果

 [HttpPost]
    public async Task<IActionResult> UploadFile(IEnumerable<IFormFile> filedata)
    {
        foreach (var f in filedata)
        {
            if (f != null)
        {
            if (f.Length > 0)
            {
                var fileName = Path.GetFileName(f.FileName);
                var fileExtension = Path.GetExtension(fileName);

                var objfiles = new FileUpload
                {
                    FileName = fileName,
                    FileType = fileExtension,
                    FileSize = f.Length,
                    CretedOn = DateTime.UtcNow,
                };
                using (var target = new MemoryStream())
                {
                    f.CopyTo(target);
                    objfiles.FileData = target.ToArray();
                }
                _context.FileUploads.Add(objfiles);
            }
        }
            else
            {
                return Ok(false);
            }
        }
        await _context.SaveChangesAsync();
        return Ok(true);
   }

Answer 1

您应该使用 rawFile，因为它包含实际的文件数据。并且键名要对应接收参数。

for (var i = 0; i < files.length; i++) {
    filedata.append("filedata", files[i].rawFile);
}

Answer 2

此问题的简单完整解决方案如下

js代码

 var fileupload = $("#FileUpload").get(0);
    var files = fileupload.files;
    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
        formData.append('files', files[i]);
    }

控制器使用 IFormFile 而不是 IEnumerable

public IActionResult UploadFile(IFormFile files)
{
    **for storing in your project folder**
    string filePath = "";
    if (files != null) {
        string uploadsFolder = Path.Combine(_webHostEnvironment.WebRootPath, "uploads");
        filePath = Path.Combine(uploadsFolder, files.FileName);
        using(var fileStream = new FileStream(filePath, FileMode.Create))
            {
                files.CopyTo(fileStream);
    }
}

Asp.Net 核心 - 使用 ajax 将文件上传到数据库

Asp.Net Core - upload file to database with ajax

ajax

jquery

file-upload

asp.net-core