Php 如何上载图像并将其发送到控制器进行验证，然后保存到数据库？

我正在项目中使用Laravel 5.4和Vue.js。AddProduct.vue是包含表单的文件。除图像外的其他表单数据工作正常。我的onchage方法应该是什么来上传图像并将其与其他表单数据一起发送到我的控制器进行处理

这是我的AddProduct.vue文件

<template>
    <div class="">
        <form class="form-horizontal" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)" enctype="multipart/form-data">
            <div class="row">
                <div class="col-sm-6">
                    <!-- Product Image -->
                    <div :class="{ 'form-group': true, 'has-error': form.errors.has('product_image') }">
                        <label for="product_image" class="col-sm-4 control-label">
                            Product Image
                        </label>
                        <div class="col-sm-8">
                            <input type="file"  @change="onFileChange" name="product_image" style="padding-top:7px;" aria-label="...">
                            <span v-if="form.errors.has('product_image')" class="help-block">
                                <strong v-text="form.errors.get('product_image')"></strong>
                            </span>
                        </div>      
                    </div>                  
                </div>

                <div class="col-sm-6">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-4">
                            <button :disabled="form.errors.any()" type="submit" class="btn btn-info">Save</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6"></div>                
            </div>          
        </form>     
    </div>
</template>

<script>
    export default{
        data() {
            return {
                form: new Form({
                    //other attributes
                    product_image: ''
                })
            }
        },

        methods: {
            onSubmit() {
                this.form
                .post('/product')
                .then(status => this.status());
            },
            onFileChange(e) {
            },

            status() {
                flash('Product added.');
            }
        }
    }
</script>

检查代码上方的代码

e.target.result

是base64映像数据，您可以将此数据传递到服务器，并将其保存为映像

代码是我自己的一个图像裁剪项目的一部分。您可以在此处查看来源：

---

好的，可以上传图像。但是我如何将它与其他表单数据一起发送到控制器以进行处理和保存？？我是新手，对这个概念我并不清楚。@zahidhasanemon，如果你想，你可以在表单中添加一个隐藏的输入。“让更改”事件将图像数据值分配给隐藏的输入，如下所示@zahidhasanemon，yesSo上传图像并将图像数据值分配给隐藏输入类型的最终onchange方法是什么？

public function store(StoreProduct $request)
    {
        $this->validate($request, [
            'product_image' => 'required|image|mimes:jpeg,png,jpg|max:1024',
        ]);
        if ($request->hasfile('product_image')){  
             if ($request->file('product_image')->isValid()) {
                 $image = $request->file('product_image');
                 $filename  = time() . '.' . $image->getClientOriginalExtension();
                 $location = public_path('images/' . $filename);
                 Image::make($image)->resize(400, 400)->save($location);        
            }               
        }
        $request->saveProduct();

        return back()->with('flash', 'Product has been added!');
    } 

onFileChange (e) {
  let files = e.target.files || e.dataTransfer.files
  if (!files.length) {
    return
  }
  this.createImage(files[0])
},
createImage (file) {
  var image = new Image()
  var reader = new FileReader()
  var vm = this
  reader.onload = (e) => {
    vm.image = e.target.result
    vm.$emit('imgUploaded', e.target.result)
  }
  reader.readAsDataURL(file)
}