在添加带有图像的类别时出现500错误,使图像在表中为空,因此如果发生错误,我可以添加类别名称。在此代码中显示可能的错误或错误,请先感谢:
这是我的模板部分
<div class="form-group">
<label>Name</label>
<input v-model="category.name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label>Image</label>
<input type="file" class="form-control" @change="onChange" accept="image/*">
</div>
<div class="form-group">
<div class="col-md-6">
<input v-show="!edit" type="submit" class="btn btn-success btn-send" value="Add">
<input v-show="edit" type="submit" class="btn btn-success btn-send" value="Edit">
</div>
</div>
</div>
</div>
这是我的路线api
Route::post('categories/store', function(Request $request){
return Category::create(['name' => $request->input(['name']),
['image' => $request->input(['image'])],
['created_at' => $request->input(['created_at'])]
]);
});
这是vue js脚本
<script>
export default {
data: function() {
return {
edit: false,
list: [],
category: {
id: '',
name: '',
image: '',
created_at: '',
}
}
},
mounted: function() {
console.log('Category Component Loaded...');
this.fetchCategoryList();
},
methods: {
onChange(e) {
console.log(e.target.files[0])
var fileReader = new FileReader()
fileReader.readAsDataURL(e.target.files[0])
fileReader.upload = (e) => {
this.category.image = e.target.result
}
console.log(this.category)
},
createCategory: function() {
console.log('Creating category...');
let self = this;
let params = Object.assign({}, self.category);
axios.post('/api/categories/store', params)
.then(function() {
self.category.name = '';
self.category.image = '';
self.edit = false;
self.fetchCategoryList();
})
.catch(function(error) {
console.log(error);
});
},