在选择时使用ajax在asp.net core中上传多个文件

Question

我是 asp.net core 的新手，我想在 asp.net core 中使用 ajax 在用户文件选择上上传多个文件。 我使用带有输入文件标签的剃刀页面。

我遵循本文的每一步https://codepedia.info/ajax-file-upload-aspnet-core-razor-pages

我能够调用文件选择事件，但是 jquery ajax 函数没有被调用，服务器端代码没有调试，因此没有文件上传。 不是单个文件上传。 我的代码没有进入调试模式。

代码

   $("#fileUpload").on('change', function () {

                var files = $('#fileUpload').prop("files");                
                var url = "/Index?handler=MyUploader";
                formData = new FormData();
                formData.append("MyUploader", files);              
               
                jQuery.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (repo) {
                        if (repo.status == "success") {
                            alert("File : " + repo.filename + " is uploaded successfully");
                        }
                    },
                    error: function (data) {

                        console.log(data);
                    }
                });
            });

错误截图

 public IActionResult OnPostMyUploader(IFormFile MyUploader)
        {
            if (MyUploader != null)
            {
                string uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "mediaUpload");
                string filePath = Path.Combine(uploadsFolder, MyUploader.FileName);
                using (var fileStream = new FileStream(filePath, FileMode.Create))
                {
                    MyUploader.CopyTo(fileStream);
                }
                return new ObjectResult(new { status = "success" });
            }
            return new ObjectResult(new { status = "fail" });
    
        }
      

Answer 1

AntiForgeryToken是一个由 post 表单标签自动生成的隐藏输入。 起初，我在页面中有一个表单，所以我没有添加@Html.AntiForgeryToken()并且它也有效。 如果页面中没有表单，那么你应该添加@Html.AntiForgeryToken()来生成它。

Answer 2

正如评论中所说。 如果您的页面中没有表单标签，出于安全原因您需要防止 CSRF 攻击，因此您需要在您的文件中实现 AddAntiforgery。

您需要添加三个关键内容：

public void ConfigureServices(IServiceCollection services)
{
    services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  //---> this line in Startup.cs class
    ...
} 

ajax 调用中的以下 beforeSend 方法：

...
beforeSend: function (xhr) {
   xhr.setRequestHeader("XSRF-TOKEN",
       $('input:hidden[name="__RequestVerificationToken"]').val());
},
...

剃须刀页面顶部的以下内容：

@Html.AntiForgeryToken()