使用 vue.js 在 laravel 中上传照片时出错
Error in uploading photo in laravel with vue.js
我正在使用 laravel 和带有 vue-router 的 vuejs 制作单页应用程序。我正在为我的 http 请求使用 api.php 路由。每当我用图像在 news table 中保存数据时，它都会显示错误。我需要做什么？
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');
您检查过您使用的是 multipart/form-data 编码吗？
编辑：
https://github.com/cretueusebiu/vform/blob/master/example/upload.html
put this code in your Vue file
<div class="col-sm-12">
<input
type="file"
@change="updateImage"
class="form-input"
:class="{ 'is-invalid': form.errors.has('image') }"
id="image"
name="image"
/>
<has-error :form="form" field="image"></has-error>
</div>
<script>
export default {
data(){
return{
news: {},
form: new Form({
id:"",
title: "",
subtitle:"",
body:"",
image:"",
postedby:""
})
}
},
methods: {
updateImage(e) {
let file = e.target.files[0];
console.log(file);
let reader = new FileReader();
if (file["size"] < 2111775) {
reader.onloadend = file => {
this.form.image= reader.result;
};
reader.readAsDataURL(file);
} else {
swal.fire({
type: "error!",
title: "Oops...",
text: "Your are uploading a large File "
});
// return ["warning", "file size"];
Fire.$emit("refreshPage");
}
},
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>
您的控制器代码是
<?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')){
$name = time().'.'.explode('/',explode(':',substr($request->image,0,strpos($request->image,';')))[1])[1];
\Image::make($request->image)->save(public_path('img/news/').$name);
//Update DB
$news->image = $name ;
}
$news->save();
}
}
如果有效请告诉我，我会提供更新代码
我正在使用 laravel 和带有 vue-router 的 vuejs 制作单页应用程序。我正在为我的 http 请求使用 api.php 路由。每当我用图像在 news table 中保存数据时，它都会显示错误。我需要做什么？
<?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');
您检查过您使用的是 multipart/form-data 编码吗？
编辑： https://github.com/cretueusebiu/vform/blob/master/example/upload.html
put this code in your Vue file
<div class="col-sm-12">
<input
type="file"
@change="updateImage"
class="form-input"
:class="{ 'is-invalid': form.errors.has('image') }"
id="image"
name="image"
/>
<has-error :form="form" field="image"></has-error>
</div>
<script>
export default {
data(){
return{
news: {},
form: new Form({
id:"",
title: "",
subtitle:"",
body:"",
image:"",
postedby:""
})
}
},
methods: {
updateImage(e) {
let file = e.target.files[0];
console.log(file);
let reader = new FileReader();
if (file["size"] < 2111775) {
reader.onloadend = file => {
this.form.image= reader.result;
};
reader.readAsDataURL(file);
} else {
swal.fire({
type: "error!",
title: "Oops...",
text: "Your are uploading a large File "
});
// return ["warning", "file size"];
Fire.$emit("refreshPage");
}
},
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>
您的控制器代码是
<?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')){
$name = time().'.'.explode('/',explode(':',substr($request->image,0,strpos($request->image,';')))[1])[1];
\Image::make($request->image)->save(public_path('img/news/').$name);
//Update DB
$news->image = $name ;
}
$news->save();
}
}
如果有效请告诉我，我会提供更新代码