如何解决axios 在将文件上传到 laravel api 时发送 null错误消息:“在 null 上调用成员函数 store()”
我有一个带有文件上传的表单。我目前正在使用 vue、axios 和 laravel 7。
我的表格如下:
<form v-on:submit.prevent="createTask" enctype="multipart/form-data" method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" v-model="task.title" />
<label for="content">Content</label>
<textarea v-model="task.content" class="form-control" id="content" name="content" rows="4" ></textarea>
<button type="submit" class="btn btn-sm btn-primary
pull-right" style="margin:10px; padding:5 15 5 15; background-color:#4267b2">Save Task</button>
<span>
<button @click="removeImage" class="btn btn-sm btn-outline-danger" style="margin:10px; padding:5 15 5 15; ">Remove File</button>
</span>
<input type="file" id="image" name="image" />
</div>
</form>
axios 提交
createTask() {
console.log(document.getElementById('image').files[0])
axios({
headers: { 'Content-Type': 'multipart/form-data' },method: 'post',url: '/api/tasks',data: {
task_id : this.task.id,title : this.task.title,content : this.task.content,created_by : this.$userId,image : document.getElementById('image').files[0],}
})
.then(res => {
// check if the request is successful
this.$emit("task-created");
this.task = {}
})
.catch(function (error){
console.log(error)
});
}
我的控制器代码
public function store(Request $request)
{
$task = $request->isMethod('put') ? Task::findOrFail($request->task_id) : New Task;
$task->id = $request->input('task_id');
$task->title = $request->input('title');
$task->content = $request->input('content');
$task->views = $request->input('views');
$task->created_by = $request->input('created_by');
$task->image = $request->image->store('images');
//$task->image = $request->file('image')->store('images');
if($task->save()) {
return new TaskResource($task);
}
}
请求有效载荷
{task_id: "",title: "test",content: "test content",created_by: "1",image: {}}
我们可以看到image属性为空
响应错误信息
"Call to a member function store() on null"
console.log(document.getElementById('image').files[0])
的输出
File {name: "test.jpg",lastModified: 1590920737890,lastModifiedDate: Sun May 31 2020 11:25:37 GMT+0100 (British Summer Time),webkitRelativePath: "",size: 436632,…}
最后修改时间:1590920737890 lastModifiedDate:2020 年 5 月 31 日星期日 11:25:37 GMT+0100(英国夏令时间){} 名称:“测试.jpg” 尺寸:436632 类型:“图像/jpeg” webkitRelativePath:"" 原型:文件
解决方法
我通过如下更改 axios post 请求解决了这个问题。我使用 FormData 将数据附加并发送到服务器
createTask() {
let data = new FormData;
data.append('image',document.getElementById('image').files[0]);
data.append('task_id',this.task.id);
data.append('title',this.task.title);
data.append('content',this.task.content);
data.append('created_by',this.$userId);
axios({
headers: { 'Content-Type': 'multipart/form-data' },method: 'post',url: '/api/tasks',data: data
})
.then(res => {
// check if the request is successful
this.$emit("task-created");
this.image = '';
this.task = {}
})
.catch(function (error){
console.log(error)
});
}
,
假设 image
列具有正确的结构,您可以尝试使用以下内容:
<?php
public function store(Request $request)
{
$task = $request->isMethod('put') ? Task::findOrFail($request->task_id) : New Task;
$task->id = $request->input('task_id');
$task->title = $request->input('title');
$task->content = $request->input('content');
$task->views = $request->input('views');
$task->created_by = $request->input('created_by');
$task->image = $request->hasFile('images')
? $request->file('images')
: null;
if($task->save()) {
return new TaskResource($task);
}
}
laravel 5.4 upload image 阅读此处了解更多信息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。