返回成功/错误消息 - Laravel&VueJS

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已经1天了，所以如果我错过了你需要看的重要部分(比如路线/控制器)，请告诉我

<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){检查是否存在错误

Answer 2

response.data.isValid在大写中使用this而不是response.isValid