Asp.Net Core - 使用 ajax 将文件上传到数据库答案

【问题标题】：Asp.Net Core - upload file to database with ajaxAsp.Net Core - 使用 ajax 将文件上传到数据库
【发布时间】：2021-05-31 13:06:54
【问题描述】：

我正在尝试上传文件，使用 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);
   }

【问题讨论】：

希望下面的博客可以帮助您使用 Ajax Jquery 上传文件。该文件只会上传到 wwwroot 文件夹。从那里，您需要将其上传到数据库codemurals.blogspot.com/2020/08/…

标签： jquery ajax asp.net-core file-upload

【解决方案1】：

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

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

【讨论】：

【解决方案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);
    }
}

【讨论】：