.NET 8中通过Ajax传递多文件及自定义文件信息至控制器问题

核心思路 #

要传递[string, file]结构的数组，不能直接将文件数组丢给FormData，需要按模型绑定规则构造FormData键名，同时后端定义对应的视图模型来接收数据。

1. 后端定义视图模型与控制器 #

首先创建对应[自定义文件名, 文件]结构的视图模型，再在控制器中接收该模型的集合：

// 视图模型：对应单个[自定义文件名, 文件]项
public class FileWithCustomName
{
    public string CustomFileName { get; set; }
    public IFormFile File { get; set; }
}

// .NET 8 API控制器
[ApiController]
[Route("api/files")]
public class FilesController : ControllerBase
{
    [HttpPost("upload")]
    public IActionResult UploadFiles([FromForm] List<FileWithCustomName> files, [FromForm] string otherFormField)
    {
        // 处理上传逻辑：遍历files集合，获取每个项的自定义文件名和文件
        foreach (var item in files)
        {
            var customName = item.CustomFileName;
            var file = item.File;
            // 示例：保存文件或处理数据
        }

        return Ok(new { message = $"成功接收{files.Count}个文件" });
    }
}

2. 前端Ajax构造FormData并请求 #

前端需要遍历文件列表，为每个文件项添加对应键值对到FormData，键名需遵循集合名[索引].属性名的格式，确保后端模型绑定能正确识别：

// 假设页面元素：
// <input type="file" id="fileInput" multiple>
// <input type="text" id="otherField" placeholder="其他表单字段">
// <button onclick="uploadFiles()">上传</button>

function uploadFiles() {
    const fileInput = document.getElementById('fileInput');
    const otherField = document.getElementById('otherField').value;
    const formData = new FormData();

    // 添加其他表单字段
    formData.append('otherFormField', otherField);

    // 遍历文件，为每个文件添加自定义文件名和文件对象
    for (let i = 0; i < fileInput.files.length; i++) {
        const file = fileInput.files[i];
        // 自定义文件名可根据业务逻辑生成，比如用户输入的名称或文件名改造
        const customFileName = `自定义名称_${i}_${file.name}`;
        
        // 关键：按模型结构构造FormData键名
        formData.append(`files[${i}].CustomFileName`, customFileName);
        formData.append(`files[${i}].File`, file);
    }

    // 原生fetch请求
    fetch('/api/files/upload', {
        method: 'POST',
        body: formData
        // 注意：无需设置contentType，FormData会自动处理multipart/form-data编码
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('上传失败:', error));
}

// 若使用jQuery Ajax，写法如下：
/*
$.ajax({
    url: '/api/files/upload',
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery处理FormData
    contentType: false, // 让浏览器自动设置multipart/form-data头
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error('上传失败:', error);
    }
});
*/

关键注意事项 #

• FormData键名规则：必须和后端视图模型的属性名严格对应，集合项索引从0开始连续，比如files[0].CustomFileName、files[0].File。
• Ajax配置：不能设置contentType: 'application/json'，必须让浏览器自动处理multipart/form-data编码；jQuery Ajax需额外设置processData: false和contentType: false。
• 模型绑定特性：控制器参数添加[FromForm]特性，明确告诉框架从表单数据中绑定，避免默认绑定方式出错。

内容的提问来源于stack exchange，提问作者Diego Perez