Vue向Laravel上传文件遇422错误：合法格式仍遭验证失败求助

问题描述 #

使用Vue结合Pinia向Laravel后端上传jpg、jpeg、png或pdf格式文件时，收到Axios返回的422错误，提示The preview must be a file of type: jpg, jpeg, png, pdf.，即使已经尝试用FormData传递文件，问题仍未解决。

错误原因 #

1. 请求数据格式错误：Pinia中发送请求时，错误地将FormData作为普通对象的preview属性传递，而非直接发送FormData实例，导致Laravel无法正确解析文件。
2. 手动设置Content-Type导致边界符丢失：手动指定content-type: multipart/form-data会让Axios无法自动生成正确的请求边界符，后端无法正确解析表单数据。

修复方案 #

1. 修改Pinia Store中的请求逻辑 #

将所有表单字段（name、description、preview）都添加到FormData中，直接发送FormData实例，同时移除手动设置的Content-Type头。

修改后的Pinia Store代码：

async createProject(name, description, preview) {
    let formData = new FormData()
    // 把所有字段都添加到FormData
    formData.append('name', name)
    formData.append('description', description)
    formData.append('preview', preview)

    await axios.get('/sanctum/csrf-cookie')
    try {
        const response = await axios.post('api/create', formData)
        if (response.data.success) {
            console.log(response)
        } else {
            console.log('创建失败')
        }
    } catch (error) {
        console.error(error)
    }
}

2. Vue组件逻辑优化（可选） #

组件中的onFileChange方法里，FileReader的代码如果仅用于获取文件对象可以省略（当前代码未用到reader的读取结果），如果需要图片预览可补充相关逻辑：

onFileChange(e) {
    let img = e.target.files[0]
    // 如需图片预览，可添加以下代码
    // let reader = new FileReader()
    // reader.onload = (e) => {
    //     this.previewUrl = e.target.result
    // }
    // reader.readAsDataURL(img)
    this.preview = img
}

3. Laravel控制器代码无需修改 #

控制器的验证逻辑和文件存储逻辑是正确的，保持现有代码即可。

关键说明 #

• FormData需要包含所有需要传递的字段，不能嵌套在普通对象中发送。
• Axios在发送FormData时会自动设置正确的Content-Type头（包含边界符），手动设置会导致解析失败。
• 确保请求路径api/create正确，且Laravel路由已配置对应的POST路由，并通过Sanctum验证用户身份。

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