Vue+Laravel环境下AJAX通过FormData上传文件转为字符串如何解决

云上老周

2026-10-3

解决方案

问题根因

前端侧：直接将File类型的数组整体追加到FormData中时，浏览器会自动将数组转为字符串格式，最终传输的是[object File]的字符串而非二进制文件内容，这是你后端拿到字符串类型数据的核心原因
后端侧：Laravel中获取上传的二进制文件不能使用$request->get()方法，该方法仅用于读取普通文本表单参数，上传文件需要调用专用的file()方法

前端代码修改

只需要替换FormData追加文件的逻辑即可，其余原有代码保持不变：

// 替换原有错误的append逻辑
// formData.append('imagesFile', this.form.imagesFile);
// 改为循环逐个追加文件，key使用数组格式后缀[]
for (let i = 0; i < getImg.length; i++) {
    formData.append('imagesFile[]', getImg[i]);
}

后端代码修改

替换原有获取文件和返回逻辑，示例包含文件验证、存储的完整流程：

public function store(Request $request)
{
    // 表单验证规则，可根据需求调整
    $request->validate([
        'imagesFile.*' => 'required|image|max:2048', // 单张图片最大2MB，仅支持图片格式
    ]);

    $savePaths = [];
    // 用file方法获取上传文件数组
    $uploadFiles = $request->file('imagesFile');

    foreach ($uploadFiles as $file) {
        // 验证文件上传是否正常
        if ($file->isValid()) {
            // 存储到storage/app/public/images目录，自动生成哈希文件名
            $path = $file->store('images', 'public');
            $savePaths[] = $path;

            // 如需自定义文件名可使用以下写法
            // $fileName = uniqid('img_') . '.' . $file->getClientOriginalExtension();
            // $path = $file->storeAs('images', $fileName, 'public');
        }
    }

    return response()->json([
        'success' => true,
        'save_paths' => $savePaths,
        'message' => '文件上传成功'
    ]);
}