如何将图像从 vuejs 发送到 laravel 服务器进行上传答案

【问题标题】：how do I send an image from vuejs to laravel server for upload如何将图像从 vuejs 发送到 laravel 服务器进行上传
【发布时间】：2020-06-19 01:32:43
【问题描述】：

这是我的表格

 <div class="modal" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h5 class="modal-title">Upload Profile Picture</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                        <div class="col-6">
                            <label>Profile Picture</label>

                            <input ref="image"  id="image" type="file" name="image" accept="image/*" class="form-control" style="border: none" @change="loadImage($event)">
                        </div>
                        <div class="col-6">
                            <img :src="this.image_file" class="uploading-image img-thumbnail" height="128" alt="Preview" />
                        </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success" @click="submitImage">Upload <i class="fas fa-user-plus"></i></button>
                </div>

            </div>
        </div>
    </div>

当我选择图像时会触发此方法，以便我可以在上传前预览，它还将图像存储在我创建的变量中

loadImage(e){

            this.file = e.target.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(this.file);
            reader.onload = e =>{
            this.image_file = e.target.result;

            };
            console.log(this.file);
        },

以上代码完美运行，可以预览图片

这些是我的变量

formData: new FormData(),

            file: null,
            image_file: '',

此代码使用 axios 处理向服务器发送请求

submitImage(){


            this.formData.append('image', this.file, this.file.name);



            console.log(this.formData);


            axios.put( '/data/profile/image',
                this.formData,
                {
                    headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                },

            ).then(function(response){
                Fire.$emit('profileUpdate');
                console.log(response.data);

                swal.fire(
                    'Update',
                    'Profile Picture Updated Successfully',
                    'success'
                );

            })
                .catch(function(error){
                    console.log(error.data);
                });
            $('#profileModal').modal('hide');
        },

这是我的 laravel 服务器端，只是检查请求是否有文件

public function uploadImage(Request $request){
    if($request->hasfile('image')){
        return "Yes";
    }
    else{return "No";}
}

上面的代码返回'NO'表示没有文件附加到formData

请问有什么我做的不对吗？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

Laravel 使用 HTTP VERB PUT 从 ajax 请求接收表单数据时遇到问题，请改用 POST 尝试相同的操作。

链接：https://github.com/laravel/framework/issues/13457

【讨论】：