在 vuejs 和 Laravel 中传递上传文件照片的值

Posted 2023-02-22

【中文标题】在 vuejs 和 Laravel 中传递上传文件照片的值

【英文标题】：pass the value of a uploaded file photo in vuejs and Laravel

【发布时间】：2021-06-18 01:31:20

【问题描述】：

我想上传我的照片并将值传递给 laravel。我有这个编辑个人资料，可以上传我的照片。现在我的问题是如何将照片的值传递给 axios。下面是我的代码

<template>
    <div class="card">
        <div class="card-header">Profile Form</div>
         <div class="card-body">
            <div class="container">
                 <div class="row">
                    <div class="col-sm">
                        <div v-show="updatePP" id="preview">
                            <img v-if="url" :src="url" />
                        </div>
                        <div v-show="pp" v-if="editProfile.profile_pic == NULL">
                             <img src="https://i.imgflip.com/4/d0tb7.jpg" />
                        </div>
                        <div v-else>
                             asasasas
                        </div>
                    </div>
                    <div class="col-sm">
                        <form @submit.prevent="formSubmit" enctype="multipart/form-data">
                        <div class="form-group">
                            <div class="form-row" >
                                <div class="col-lg-12">
                                    <label>First Name:</label>
                                    <br>
                                    <input type="text" id="name" name="name" class="form-control" v-model="editProfile.name" />  
                                </div>
                                <div class="col-lg-12">
                                    <label>Last Name:</label>
                                    <br>
                                   <input type="text" id="lastName" name="lastName" class="form-control" v-model="editProfile.last_name" />
                                </div>
                                <div class="col-lg-12">
                                    <label>Address:</label>
                                    <br>
                                    <input type="text" id="address" name="address" class="form-control" v-model="editProfile.address" />
                                </div>
                                <div class="col-lg-12">
                                    <label>Upload Profile:</label>
                                    <br>
                                    <input type="file" id="photo" name="photo" @change="onFileChange" />
                                </div>
                               
                                <div class="col-lg-12">
                                    <br>
                                    <br>
                                    
                                  
                                    <button type="submit" class="btn btn-success btn-lg">Update</button>
                                </div>                   
                                
                            </div>
                        </div>
                        </form>
                       
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default 
    data()
        return
           
            
            editProfile:
                userId: this.$userId,
            ,
            
            url: null,
            pp: true,
            updatePP: false,
            userId:this.$userId,
        
    ,

    mounted()
        const url = window.location.href;
        const id = url.split("/").slice(4)[0];
        this.getEditProfile(id);
    ,
    methods:
        onFileChange(e)
            const file = e.target.files[0];
            this.url = URL.createObjectURL(file);
            this.editProfile.photo = file;

            this.updatePP = true;
            this.pp = false;
    
        ,
        
        formSubmit()
            const ids = this.userId;      
           
            let currentObj = this;

            alert(this.editProfile.name);
            alert(this.editProfile.last_name);
            alert(this.editProfile.address);
            alert(this.editProfile.photo.name);

            let formData = new FormData();
            formData.append('photo', this.editProfile.photo.name);
            formData.append('name', this.editProfile.name);
            formData.append('lastName', this.editProfile.last_name);
            formData.append('address', this.editProfile.address);
            console.log(formData.values);
            axios.put(`/api/profile/$ids/update`, this.editProfile).then(response=>
                console.log(response.data);
                currentObj.success = response.data.success;
               

            ).catch(error=>
                console.log(error);
                currentObj.output = error;
            );
        ,

        updateProfile(id)
           
        ,
        
        getEditProfile(id)
           axios.get(`/api/profile/$id/edit`).then(response=>
                this.editProfile = response.data;
                console.log(response.data);
           );
        
    

</script>

<style scoped>
    #preview 
        display: flex;
        justify-content: center;
        align-items: center;
    

    #preview img 
        max-width: 250px;
        max-height: 250px;
    
</style>

我正在使用FormData()，我希望将数据传递给 axios。 非常感谢任何帮助。 TIA

【参考方案1】：

您需要包含文件的输入字段并提交您正在创建的FormData 对象。

将您的 submit() 函数更改为类似的内容，html 表单不支持 PUT、PATCH 或 DELETE 操作。因此，在定义从 HTML 表单调用的 PUT、PATCH 或 DELETE 路由时，您需要对其进行扩展，并在表单中添加一个隐藏的 _method 字段（https://laravel.com/docs/8.x/routing#form-method-spoofing）：

formSubmit()
            const ids = this.userId;      
           
            let currentObj = this;

            alert(this.editProfile.name);
            alert(this.editProfile.last_name);
            alert(this.editProfile.address);
            alert(this.editProfile.photo.name);

            let formData = new FormData();
            formData.append('photo', this.editProfile.photo.name);
            formData.append('name', this.editProfile.name);
            formData.append('lastName', this.editProfile.last_name);
            formData.append('address', this.editProfile.address);
            formData.append('file', document.getElementById('fileInputId').files[0]);
            console.log(formData.values);
            axios.post(`/api/profile/$ids/update`, formData).then(response=>
                console.log(response.data);
                currentObj.success = response.data.success;
               

            ).catch(error=>
                console.log(error);
                currentObj.output = error;
            );
        ,

然后要使用put，请将其添加到您的表单中：<input type="hidden" name="_method" value="PUT">。

在您的控制器中，您可以通过以下方式检查文件是否成功通过：

public function controllerMethod(Request $request)

    if($request->hasFile('file')) 
      dd('Success - there is a file.');
   

    dd('Unsuccessful - there is no file');

这个问题可能会有所帮助：How to send a file via Axios to Laravel

【讨论】：

你能更新你的代码吗？当我将 formData 传递给 axios 时，它似乎不起作用

如何将 formData 传递给我的 Laravel

嗨，为什么我的formData在数据通过tru laravel时是空的

您是否更新了您的axios.put() 以包含formData 对象，而不是您之前使用的this.editProfile？

是的，在注释 axios.put(/api/profile/$ids/update, formData) 中使用您的代码