如何将file类型输入值存入隐藏域用于AJAX提交并解决返回[object FileList]问题

• 隐藏输入框的value仅支持存储字符串类型，你将FileList文件对象直接赋值给隐藏输入框时，JS会自动调用对象的toString()方法转成"[object FileList]"字符串，无法传递真实文件资源
• 后端获取文件的写法也有错误，没有调用Laravel提供的文件读取方法
• 原提交逻辑里重置文件输入框的选择器拼写错误，缺少#选择符

第一步：移除隐藏输入框中转逻辑，用变量缓存选中的文件 #

文件对象属于JS二进制引用类型，无法序列化存入输入框，直接用全局变量缓存即可：

// 全局变量缓存选中的Excel文件
let selectedExcel = null;
document.getElementById('file').onchange = function() {
    // 取用户选中的第一个文件
    selectedExcel = this.files[0];
};

第二步：修改AJAX提交逻辑 #

直接将缓存的文件对象插入FormData提交，不要读取隐藏输入框的值：

// 非空校验
if (!selectedExcel) {
    alert('请先选择Excel文件');
    return;
}
const formData = new FormData();
// 直接插入文件对象
formData.append('file', selectedExcel);

$.ajax({
    url: "{{ route('admin.handle-import') }}",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(res) {
         // 修正选择器拼写错误，重置文件输入框
         $('#file').val('');
         // 清空缓存的文件
         selectedExcel = null;
    }
});

第三步：修正后端文件读取逻辑 #

Laravel中需要调用file()方法读取上传的文件资源：

// 原写法错误，仅能读取普通字符串参数
// $file = $request->file;
// 正确写法
$file = $request->file('file');

后续就可以用$file->store()等方法处理Excel文件了。

以上逻辑已经可以避免ERR_UPLOAD_FILE_CHANGED错误：我们提交的是提前缓存好的文件对象，提交完成后才重置文件输入框，不会出现提交过程中文件被修改的问题。

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