Laravel5.8+Vue2项目中POST表单隐藏input如何正确上传文件

问题核心原因 #

隐藏input的value仅支持字符串类型，你将File对象通过v-model绑定到隐藏input时，Vue会自动将File对象序列化为[object File]字符串，提交到后端自然无法识别为文件类型。

前端修改方案 #

提供两种可选实现，根据你的业务需求选即可：

方案1：保留原生表单默认提交逻辑 #

删除你当前写的隐藏input，替换为隐藏的原生文件input，不需要用v-model绑定，原生表单会自动携带文件内容：

<input
    name="documents[0][files]"
    accept="image/*,application/pdf"
    type="file"
    ref="fileInput"
    style="display:none"
    @change="onSelectFile"
>

对应JS方法可以简化，不需要再给files变量赋值：

onSelectFile(e){
    if(!e.target.files.length) return;
    this.selected_file = e.target.files[0];
    // 这里可以加文件预览、文件名展示的逻辑，不需要额外赋值给input
    e.target.value = null;
},

如果需要支持多文件上传，给input加multiple属性，name改为documents[][files][]即可。

方案2：异步提交表单（灵活性更高） #

手动构造FormData对象提交，不需要依赖原生表单的默认提交行为：

// 表单提交触发方法
submitForm() {
    const form = document.getElementById('form_register_new_policy_modal')
    const formData = new FormData(form)
    // 手动追加选中的文件，多文件的话循环追加即可
    formData.append('documents[0][files]', this.selected_file)
    // 发送请求
    axios.post(form.action, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(res => {
        // 处理提交结果
    })
}

后端适配修改 #

你当前的后端代码也存在调用错误，$files['files']本身就已经是上传文件对象，不需要再调用->file('file')，修改addPolicy里的文件存储逻辑：

public static function addPolicy(array $data)
{      
    DB::transaction(function () use($data) {
        if ( isset($data['documents']) ) {
            foreach($data['documents'] as $doc){
                $uploadedFile = $doc['files'];
                $policy->documents()->create([
                    'file' => $uploadedFile->store($policy->employee->urlFolderEmployee(), 'public'),
                    'file_name' => $uploadedFile->getClientOriginalName()
                ]);
            }
        }
        return $policy;
    });
}

同时在StorePolicy表单验证类中补充文件验证规则，确保拿到的是合法上传文件：

public function rules()
{
    return [
        // 其他字段规则
        'documents.*.files' => 'required|file|mimes:jpg,jpeg,png,pdf|max:2048',
    ];
}

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