1

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

    }



}

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

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），并且在 Dev Console 中将向我显示：

开发控制台中的输入

4

1 回答 1

0

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

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

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

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

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

一切在这里都有很好的描述：https ://serversideup.net/uploading-files-vuejs-axios/

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

于 2020-11-22T08:55:32.247 回答