.NET Core Web API中的IFormFile对于axios和ajax文件上载为空，但在Postman中有效 [英] IFormFile in .NET Core Web API is null for axios and ajax file upload but works in Postman

问题描述

所以我有一个API，它将使用以下签名将文件上传到Azure:

So I have an API that will upload a file to Azure with the following signature:

public async Task<IActionResult> Post([FromForm]IEnumerable<IFormFile> files)

此API是使用Postman构建和测试的，并且可以与以下参数一起很好地工作:

This API was built and tested with Postman and it works great with the following parameters:

但是，当我尝试在我的react应用程序中使用Postman或axios生成的AJAX jQuery调用它时，IFormFile文件变量为null.

But when I attempt to call it within my react app with either the AJAX jQuery generated by Postman or axios, the IFormFile file variable is null.

handleFileChange = async (event) => {
    let formData = new FormData();
    let files = event.target.files[0];
    formData.append('file', logo); // Can put "files" here or the imported picture "logo"


 console.log("Form Data:", formData.get("files"));
    await axios.post('api/files/uploadfiles', formData,{
        'content-type': "multipart/form-data",
        'Content-Type': "multipart/form-data",
    })
         .then(response => response.data)
        .then(data => console.log("File Upload Response:" , data));
}

.NET Core通过axios/ajax获取的API请求

您将在这里注意到，主要区别在于邮递员在文件下有文件，而axios请求似乎仅在结果视图"下引用了文件，而在文件下则没有内容.我要在表格上附加正确的项目吗?我已经尝试使用导入的图像以及来自以下输入字段的动态图像进行此操作:

You will notice here that the main difference is that the Postman has the file under files, while the axios request seems to only reference it under "Results View" but has nothing under files. Am I appending the correct item to the form? I have tried this with an imported image as well as a dynamic one from the following input field:

<FormGroup id = 'file-form'>
    <Label for="file">Attach Files:</Label>
    <Input type="file" name="files" id="File" onChange={this.handleFileChange}/>
</FormGroup>

但是没有运气.任何帮助将是极其 感谢！

but had no luck. Any help would be extremely appreciated!!

在查看了一些Microsoft 文档我在Microsoft文档中发现了一个警告，该警告说将表单的enctype改为"multipart/form-data".我尝试这样做无济于事.

After reviewing some Microsoft documentation I discovered a caveat in the Microsoft docs that says enctype of the form to "multipart/form-data". I attempted this to no avail.

推荐答案

这是我在操作方法中执行的操作:

This is how I did it in the action method:

[HttpPost]
public void Post([FromForm]ValueFile files)
{
     //do logic
}

然后我创建一个名为ValueFile的ViewModel

Then I create a ViewModel named ValueFile

public class ValueFile
{
    public IEnumerable<IFormFile> Files { get; set; }
}

在我的Web客户端中，我使用了jquery ajax:

In my web client I used jquery ajax:

$('#fileTest').on('change',
        function() {

            var fd = new FormData();
            fd.append('files', $('#fileTest')[0].files[0]);

            $.ajax({
                "async": true,
                "crossDomain": true,
                "url": "http://localhost:5000/api/values",
                "method": "POST",
                "processData": false,
                "contentType": false,
                "mimeType": "multipart/form-data",
                "data": fd
            }).done(function (response) {
                console.log(response);
            });
        });

<form id='file-form'>
    <Label for="file">Attach Files:</Label>
    <Input type="file" name="files" id="fileTest"  />
</form>

希望这对您有帮助

这篇关于.NET Core Web API中的IFormFile对于axios和ajax文件上载为空，但在Postman中有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！