介绍

因此，我有一个 API，可以使用以下签名将文件上传到 Azure：

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

该 API 是使用 Postman 构建和测试的，在使用以下参数时效果很好：

但是，当我尝试使用 Postman 或 axios 生成的 AJAX jQuery 在 React 应用程序中调用它时，IFormFile 文件变量为 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 请求

.NET Core 使用 Postman 获取的 API 请求

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>

但没有运气。任何帮助都会非常 赞赏！

更新#1

在回顾了一些微软之后文档 https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-2.2我在 Microsoft 文档中发现了一个警告，称表单的 enctype 为“multipart/form-data”。我尝试这样做没有成功。

这就是我在操作方法中所做的：

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

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

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

在我的网络客户端中，我使用了 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>

希望这可以帮助