Question

这是我的表格

 <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";}
}

上面的代码返回“ 否”，这意味着没有文件附加到formData

请问我有什么不对的吗？

Answer 1

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

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

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

1 个答案: