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

Question

我在项目中使用 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>

这是我的控制器代码

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!');
    } 

Answer 1

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)
}

查看上面的代码e.target.result是一个base64的图片数据，你可以把这个数据传给服务器，保存成图片。

该代码是我自己的图像裁剪项目的一部分。 您可以在此处查看来源： https : //github.com/akulubala/vue-image-upload-croppie/blob/master/src/components/VueImageUploadCroppie.vue