如何通过单个Ajax请求同时向控制器发送文件名与上传文件

你的代码存在三处核心错误，修改后即可正常运行：

• 错误1：文件选择器ID引用错误，HTML中文件控件ID为theFile，原有JS中错误使用了questionFile作为选择器，无法获取选中的文件
• 错误2：FormData用法错误，不能将FormData作为普通JSON对象的属性传递，所有请求参数都需要append到同一个FormData实例中提交
• 错误3：文件参数键名与后端不匹配，后端接收文件的参数名为file，原有代码中FormData append的键名为upload，导致后端无法识别到上传的文件

修复后的前端JS代码 #

// 请将这段代码放在上传按钮的点击事件回调中执行
// 前置参数校验（可选，建议添加）
const selectedFile = $('#theFile')[0].files[0];
const customFileName = $("#fileName").val().trim();
if (!selectedFile) {
    alert("请先选择需要上传的文件");
    return;
}
if (!customFileName) {
    alert("请输入自定义文件名");
    return;
}

// 构造FormData提交参数
const formData = new FormData();
formData.append('file', selectedFile);
formData.append('fileName', customFileName);

$.ajax({
    url: '替换为你自己的后端接口地址',
    type: 'POST',
    data: formData,
    cache: false,
    processData: false,
    contentType: false,
    success: function(res) {
        console.log("上传成功", res);
    },
    error: function(err) {
        console.error("上传失败", err);
    }
})

后端代码说明 #

你提供的后端控制器代码无需修改，只要前端FormData的参数键名和后端方法的入参名file、fileName保持一致，即可正常接收文件和自定义文件名参数。

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