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

Question

我想上传我的照片并将值传递给 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

Answer 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