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

Posted 2023-02-22

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

【英文标题】：Laravel uploading multiple images with error idback: "The idback must be a file of type: jpg, jpeg, png."

【发布时间】：2021-03-04 19:35:09

【问题描述】：

我正在使用 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

【问题讨论】：

您确定您的表单提交正确吗？检查浏览器开发窗格中的网络选项卡并检查帖子的内容。

@MaartenVeerman 我发现了问题，但我不知道代码中的正确解决方案。我还用这些信息编辑了帖子。

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

嗨，@Maarten Veerman，好的，请问我是否正确理解了您的行： const fileA = this.$refs.fileA.files[0];访问列表中的第一个文件，并且 fileA 是您输入中 ref="" 的值？

我现在也进行了一些编辑..但仍然不起作用..当我试图捕捉它时，它会写给我 TypeError: Cannot read property 'idfront' of undefined (我试图 console.log(this .idfront) 和 console.log(this.idback) )

您要在哪里执行 console.log？您能否展示一下您是如何添加ref 的？不过，我认为您做对了，因为在您的第一条评论中，您确实正确理解了我的回答。

我刚刚更新了所有内容。我使用 name="" 和 ref="" （也都使用）。

控制台显示您可以访问输入元素。当您记录其files 属性时会发生什么？