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 Name -->
                    <div :class="{'form-group': true, 'has-error': form.errors.has('product_name')}">
                        <label for="product_name" class="col-sm-4 control-label">
                            Product Name
                            <i class="fa fa-asterisk text-danger require" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Required"></i>
                        </label>

                        <div class="col-sm-8">
                            <input v-model="form.product_name" type="text" class="form-control" name="product_name" id="product_name" placeholder="Product Name">

                            <span v-if="form.errors.has('product_name')" class="help-block">
                                <strong v-text="form.errors.get('product_name')"></strong>
                            </span>
                        </div>
                    </div>  

                    <!-- Category Name -->
                    <div :class="{'form-group': true, 'has-error': form.errors.has('category_id')}">
                        <label for="category_id" class="col-sm-4 control-label">
                            Category Name
                            <i class="fa fa-asterisk text-danger require" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Required"></i>
                        </label>

                        <div class="col-sm-8">
                            <select type="text" v-model="form.category_id" class="form-control" id="category_id">
                                <option>Select Category</option>
                                <option value="0">Computer</option>
                                <option value="1">Smart Phone</option>
                                <option value="2">TV</option>
                            </select>       

                            <span v-if="form.errors.has('category_id')" class="help-block">
                                <strong v-text="form.errors.get('category_id')"></strong>
                            </span>
                        </div>
                    </div>  

                    <!-- 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">
                    <!-- Sell Price -->
                    <div :class="{ 'form-group': true, 'has-error': form.errors.has('product_sellPrice') }">
                        <label for="product_sellPrice" class="col-sm-4 control-label">
                            Product Price
                            <i class="fa fa-asterisk text-danger require" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Required"></i>
                        </label>

                        <div class="col-sm-8">
                            <input type="number" min="0" max="10000000" step="any" v-model="form.product_sellPrice" class="form-control" name="product_sellPrice" id="product_sellPrice" placeholder="Sell Price">

                            <span v-if="form.errors.has('product_sellPrice')" class="help-block">
                                <strong v-text="form.errors.get('product_sellPrice')"></strong>
                            </span>
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="form-group">
                        <label for="product_details" class="col-sm-4 control-label">
                        Product Details
                        </label>

                        <div class="col-sm-8">
                            <textarea id="product_details" v-model="form.product_details" name="product_details" class="form-control" rows="3" placeholder="Enter ..."></textarea>
                        </div>
                    </div>

                </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({
                    product_name: '',
                    category_id: '',
                    product_sellPrice: '',
                    product_image: '',
                    product_details: '',
                })
            }
        },

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

TIA。

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

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

1 个答案: