Laravel 上传多张带有错误 idback 的图像：“idback 必须是文件类型：jpg、jpeg、png。”

Question

我正在使用 Laravel 8 和 Vue.js 制作一个表单，在该表单中我上传了两张图片（每张图片都进入不同的路径并通过不同的输入字段）。

我在网上冲浪，却一无所获。

我在 Google Chrome 开发工具 -> 网络 -> 预览中遇到的错误：

idback: "The idback must be a file of type: jpg, jpeg, png."
idfront: "The idfront must be a file of type: jpg, jpeg, png."

但我张贴成表格的文件是.jpg

我的 VerificationController.php 存储函数：

public function store(Request $request) 
{
    $request->validate([
      'firstname' => 'required|min:2|max:255',
      'lastname' => 'required|min:2|max:255',
      'idfront' => 'required|mimes:jpg,jpeg,png|max:2048',
      'idback' => 'required||mimes:jpg,jpeg,png|max:2048',
    ]);
    
    
    
    
    if($request->hasFile('idfront') && $request->hasFile('idback')) {
       $file_front = time().'.'.$request->file('idfront')->extension();
       $file_back = time().'.'.$request->file('idback')->extension();
       
       $request->file('idfront')->storeAs('user_verifications/front', $file_front);
       $request->file('idback')->storeAs('user_verifications/back', $file_back);
       
       $user = auth()->user();
       $user = DB::table('users')->where('id', $user->id)->first();
       $user->verified = "yes";
       $user->save();
       
          
       $verification = new Verification();
       $verification->user_id = $user->id;
       $verification->firstname = $request->input('firstname');
       $verification->lastname = $request->input('lastname');
       $verification->country = $request->input('country');
       $verification->id_front_path = $file_front;
       $verification->id_back_path = $file_back;
       $verification->save();
          
       DB:commit();

    }



}

Verify.vue 文件，带有 axios 请求：

data() {
        return {
            verificationForm: this.$inertia.form({
                firstname: '',
                lastname: '',
                country: 'USA',
                options: [
                  { text: 'United States', value: 'USA' },
                  { text: 'United Kingdom', value: 'UK' },
                  { text: 'Afghanistan', value: 'Afghanistan' },
                  {...},
                ],
                idfront: '',
                idback: '',
            }, {
                bag: 'createVerification',
                resetOnSuccess: false,
            }),
        }
    },
     methods: {
        createVerification() {
            let formData = new FormData();
            
            formData.append('idfront', idfront);
            formData.append('idback', idback);
            
            this.verificationForm.post('/user/verify',
                formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
              ).then(function() {
                    console.log(idfront);
                    console.log(idback);
              })
              .catch(function() {
                    console.log(idfront);
                    console.log(idback);
              });
        },
        handleFileUpload() {
            const idfront = this.$refs.idfront.files[0];
            const idback = this.$refs.idback.files[0];
        }
    }
}

还有标签：

<form @submit.prevent="$emit('submitted')" enctype="multipart/form-data">

Verify.vue 中的输入：

<jet-input-file id="idfront" type="file" ref="idfront" name="idfront" placeholder="Front side of ID" v-model="verificationForm.idfront" v-on:change="handleFileUpload()" />
<jet-input-error :message="verificationForm.error('idfront')" />
                            
                            
<jet-input-file id="idback" type="file" ref="idback" name="idback" placeholder="Back side of ID" v-model="verificationForm.idback" v-on:change="handleFileUpload()"/>
<jet-input-error :message="verificationForm.error('idback')" />

现在，我看到这是在 POST 请求中（所有其他输入均已正确提交，但没有正确提交）：

idback: "C:\fakepath\6171500.jpg"
idfront: "C:\fakepath\32_d.jpg"

编辑后：它仍然会在我的请求中给我C:/fakepath/image.jpg 和C:/fakepath/image2.jpg（并抛出状态 302），并且在开发控制台中会显示这个：

Input in Dev Console

Answer 1

文件上传不同于标准的纯文本表单上传，因为需要发送文件对象。

在非 ajax 表单中，这需要将表单内容类型设置为 multipart/form-data，并且浏览器将负责提交文件对象。

在 ajax 表单提交中，就像您的情况一样，您需要设置内容类型，并自己处理提交文件对象。

在您当前的情况下，您只提交文件路径，即文件对象的字符串表示形式。您需要获取文件对象，例如通过在文件输入中定义ref，并使用以下方式访问该对象：

const fileA = this.$refs.fileA.files[0];

这里都很好地描述了：https://serversideup.net/uploading-files-vuejs-axios/

我建议您通读该教程。它清楚地展示了如何定义要发送到服务器的FormData 对象。