如何通过jQuery Ajax向C#后端同时发送文件与字符串参数

前后端参数名不匹配，ASP.NET Core 模型绑定规则要求提交的表单字段名必须和接口定义的参数名完全一致，否则会绑定失败返回400：

• 后端接口定义的字符串类型参数名为fileWithName
• 前端FormData中追加的字符串字段键名为pathWithName，两者不匹配

除此之外还有两个常见触发点：

• 未选文件/未填文件名就发起空请求
• 后端接口错误给参数加了[FromBody]绑定特性，multipart/form-data类型请求不支持该绑定方式

1. 修正前端FormData的字段名，保证和后端参数名完全一致
2. 增加提交前的空值校验，避免无效请求
3. 移除后端接口参数上不必要的绑定源特性（比如[FromBody]）

前端jQuery代码 #

$("#startUploading").on("click",function() {
    const selectedFile = $('#myfile')[0].files[0];
    const customFileName = $.trim($("#fileAddressUploadTo").val());
    
    // 提交前基础校验
    if (!selectedFile) {
        alert('请先选择需要上传的文件');
        return;
    }
    if (!customFileName) {
        alert('请输入自定义文件名');
        return;
    }

    const formData = new FormData();
    formData.append('upload', selectedFile);
    // 字段名修正为和后端参数完全匹配的fileWithName
    formData.append('fileWithName', customFileName);

    $.ajax({
        url: apiUrl+'/api/V1/Servers/UploadImage',
        type: 'POST',
        data: formData,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
        },
        cache: false,
        processData: false,
        contentType: false,
        success: function (res) {
            console.log('上传成功', res);
        },
        error: function (err) {
            console.log('上传请求异常', err);
        }
    });
});

后端C#接口代码 #

保持原有参数定义即可，不要额外加[FromBody]特性：

public IActionResult UploadImage(IFormFile upload, string fileWithName)
{
    // 此处可直接获取到上传的文件对象upload，以及前端传入的自定义文件名fileWithName
    // 后续业务逻辑：使用fileWithName作为存储文件名，将upload文件写入服务器对应目录即可
}

注意：processData: false和contentType: false两个配置必须保留，否则jQuery会自动把FormData转成urlencoded格式，导致文件上传失败。

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