【发布时间】：2019-12-14 18:39:37
【问题描述】：
我正在使用 laravel 和 vuejs 和 vue-router 制作单页应用程序。我正在为我的 http 请求使用 api.php 路由。每当我在我的news 表中保存带有图像的数据时，它都会向我显示一个错误。我需要做什么？
NewsController.php
<?php
namespace App\Http\Controllers\API;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\News;
class NewsController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return News::latest()->paginate(10);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required|string|max:191|unique:news',
'subtitle' => 'required|string|max:191',
'body' => 'required|string',
'image' => 'image|mimes:jpeg,png,jpg,gif,svg,PNG|max:2048',
]);
$news = new News;
$news->title = $request->title;
$news->subtitle = $request->subtitle;
$news->body = $request->body;
if ($request->hasFile('image')){
//Add new photo
$image = $request->file('image');
$filename = time() . '.' . $image->getClientOriginalExtension();
$location = public_path('img/news/' . $filename);
\Image::make($image)->resize(300,300)->save($location);
$oldFilename = $news->image;
//Update DB
$news->image = $filename;
//Delete the old photo
// Storage::delete($oldFilename);
}
$news->save();
}
}
News.vue
<!-- Vform -->
<form @submit.prevent="createNews()">
<div class="form-group">
<label>News Title</label>
<input
v-model="form.title"
type="text" name="title"
placeholder="Title"
class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
<has-error :form="form" field="title"></has-error>
</div>
<div class="form-group">
<label>Subtitle</label>
<input
v-model="form.subtitle"
type="text"
name="subtitle"
placeholder="Subtitle"
class="form-control" :class="{ 'is-invalid': form.errors.has('subtitle') }">
<has-error :form="form" field="subtitle"></has-error>
</div>
<div class="form-group">
<label>News Content</label>
<textarea
v-model="form.body"
type="text"
name="body"
placeholder="News Content"
class="form-control" :class="{ 'is-invalid': form.errors.has('body') }">
</textarea>
<has-error :form="form" field="body"></has-error>
</div>
<div class="form-group">
<label>Picture</label>
<input type="file" id="image"
class="form-control" :class="{ 'is-invalid': form.errors.has('image') }">
<has-error :form="form" field="image"></has-error>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<!-- <button v-show="editmode" type="submit" class="btn btn-primary">Update</button> -->
<button type="submit" class="btn btn-success">Create</button>
</div>
</form>
<!-- vform -->
<script>
export default {
data(){
return{
news: {},
form: new Form({
id:"",
title: "",
subtitle:"",
body:"",
image:"",
postedby:""
})
}
},
methods: {
loadNews(){
axios.get('api/news')
.then(({data}) => (this.news = data))
},
createNews(){
this.$Progress.start()
this.form.post("api/news")
.then(()=>{
$("#addNews").modal("hide")
$(".modal-backdrop").remove()
swal.fire("Created!", "", "success")
})
this.$Progress.finish()
},
},
created() {
console.log('Component mounted.')
this.loadNews()
}
}
</script>
api.php
Route::apiResource('news', 'API\NewsController');
【问题讨论】：
标签： laravel vue.js upload vue-component