使用 ajax 上传图像文件并在 asp.net 核心 mvc 控制器中接收它答案

【问题标题】：Uploading image file with ajax and receiving it with in the asp.net core mvc controller使用 ajax 上传图像文件并在 asp.net 核心 mvc 控制器中接收它
【发布时间】：2020-12-24 18:07:02
【问题描述】：

我已经尝试了Solution 中提到的所有可能的方法，但是没有任何进展。请帮忙。

所以我的ajax请求如下：

function photoUploadConfirmed() {
            event.preventDefault();
            var files = $("#image")[0].files;
            var formData = new FormData();
            formData.append("file", files[0]);
            console.log(files); // I just check here and in browser I can see file name and size
            console.log(formData); // I expect to see the same here, but here it almost shows empty
            $.ajax({
                type: "POST",
                url: "/Account/ChangeProfilePicture",
                data: { image: formData }, // In the controller it receives IFormFile image
                processData: false,
                contentType: false,
                success: function () {
                    console.log("Done");
                    $("#profilePhoto").val('');
                    $("#profPicUploadConfirm").attr("disabled", true);
                },
                error: function (errorMessage) {
                    console.log(errorMessage);
                }
            });
        }

控制器的操作接收到 ajax 发布请求，但 IFormFile 图像始终为空。

    [HttpPost]
    public async Task<IActionResult> ChangeProfilePicture(IFormFile image)
    {
       // I do save here the image in the folder, but problem is that image==null
    }

【问题讨论】：

你的文件名要和输入的参数名匹配，把图片改成文件。并将 [FromBody] 属性与输入参数一起使用
@MuhammadKamranAslam 我也试过这个，还是没有满意的结果
你能分享这个代码的示例吗，
@MuhammadKamranAslam 解决方案发布在下面，谢谢。

标签： ajax asp.net-core asp.net-core-mvc

【解决方案1】：

控制器的动作接收到 ajax 发布请求，但是 IFormFile 图像始终为空。

通过formData append上传文件时，此时名称应与action中接收参数的"image"一致：

formData.append("image", files[0]);

而且因为你只需要将IFormFile传递给action，在ajax的data参数中，你只需要把formData附加了名为Image的文件放到它上面：

 data: formData,

改变你的js如下：

function photoUploadConfirmed() {
            event.preventDefault();
            var files = $("#image")[0].files;
            var formData = new FormData();
            formData.append("image", files[0]);
            console.log(files); // I just check here and in browser I can see file name and size
            console.log(formData); // I expect to see the same here, but here it almost shows empty
            $.ajax({
                type: "POST",
                url: "/Account/ChangeProfilePicture",
                data: formData, // In the controller it receives IFormFile image
                processData: false,
                contentType: false,
                success: function () {
                    console.log("Done");
                    $("#profilePhoto").val('');
                    $("#profPicUploadConfirm").attr("disabled", true);
                },
                error: function (errorMessage) {
                    console.log(errorMessage);
                }
            });
        }

这是测试结果：

【讨论】：