Question

所以我正在修补一个图像上传器，它会在上传之前预览图像。

仅允许jpg，jpeg或png图片格式存在限制，但是，错误消息未被返回，我尝试了多种方法请参阅下面的代码：

<template>
    <div class="row">
        <div class="col-md-12">
            <img :src="image" class="img-responsive" alt="">
        </div>
        <div class="col-md-8">
            <input type="file" v-on:change="onFileChange" class="form-control">
        </div>
        <div class="col-md-4">
            <button class="btn btn-success btn-block" @click="upload">Upload</button>
        </div>
    </div>
</template>

这是使用Vue和Laravel设计的。我真的有一天学习Vue所以如果我错过了你需要看的重要部分（比如路线/控制器），请告诉我。

<script>
    export default {
        data() {
            return {
                image: ''
            }
        },

        methods: {
            onFileChange(e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
            },
            createImage(file) {
                let reader = new FileReader();
                let vm = this;
                reader.onload = (e) => {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);
            },
            upload(){
                axios.post('/api/upload',{image: this.image})
                    .then(response => {

                    });
            }
        }
    }
</script>

请参阅以下控制器：

public function upload(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'image' => 'required|image64:jpeg,jpg,png'
        ]);
        if ($validator->fails()) {
            return response()->json(['errors'=>$validator->errors()]);
        } else {
            $imageData = $request->get('image');
            $fileName = Carbon::now()->timestamp . '_' . uniqid() . '.' . explode('/', explode(':', substr($imageData, 0, strpos($imageData, ';')))[1])[1];
            Image::make($request->get('image'))->save(public_path('images/').$fileName);
            return response()->json(['error'=>false]);
        }
    }

Answer 1

从laravel控制器验证表单并返回错误

private function validateForm($advsearch){
    $validator = Validator::make($advsearch, [
        'fname' => 'required',
    ]);
    return $validator;
}

public function submitForm(Request $request){
    $validator = $this->validateForm($request->all());
    if ($validator->fails()) {
        return response()->json(['isvalid'=>false,'errors'=>$validator->messages()]);
    }
    .....
    .....
}

通过绑定显示在vue中

<div>{{errors.fname?errors.fname[0]:''}}</div>

如果您已在vue数据中绑定errors

   data() {
        return {
            errors:[],
            image: ''
        }
   },

并在提交后更新，如果您收到任何错误

  axios.post('/api/upload',{image: this.image})
     .then(response => {
         if(response.isValid == false){
            this.errors = response.errors;
         }
  });

在您的更新中，您可以if(response.body.errors !== undefined){

检查是否存在错误

返回成功/错误消息 - Laravel＆amp; VueJS

1 个答案: