我正在尝试将从javascript(使用vue)发送的图像保存为formdata,我试图将其正确保存到数据库中并在存储目录中创建一个文件夹。
到目前为止,我已经做到了:
// the axios works properly
submit () {
const formData = new FormData();
formData.append('thumbnail', this.selectedImageFile);
formData.append('title', this.title)
formData.append('image', this.image)
formData.append('thumbnail', this.thumbnail)
formData.append('day', this.day)
if (this.$refs.form.validate()) {
axios.post('/event/store', formData)
.then((response) => {
console.log("event saved: " + response.data);
})
.catch((error) => {
console.log("error trying to save event: " + response);
})
}
},
在控制器的存储方法中,我执行以下操作:
public function store(EventRequest $request)
{
$event = $this->event->create([
'title' => $request->title,
'image' => $request->image,
'thumbnail' => $request->thumbnail
]);
$this->event->createDir($request->file('image'), $request->file('thumbnail'), $request->title);
if($event) {
return response()->json('success');
}
return response()->json('An error accured');
}
在我的存储库中创建的createDir方法
public function createDir($image, $thumbnail, $title)
{
$image->store($title.'/image');
$thumbnail->store($title.'/thumbnail');
}
Axios帖子正常运行。
$request->file('image')
和$request->file('thumbnail')
返回null,而如果我在控制台中输出formdata,则会得到正确的日志。
我想将文件名保存在数据库中,并在存储中创建包含两个图像的文件夹。
我不确定如何使用FormData进行管理。
答案 0 :(得分:3)
只需将您的存储方法更新为以下内容:
public function store(EventRequest $request)
{
$event = $this->event->create([
'title' => $request->title,
'image' => $request->image,
'thumbnail' => $request->thumbnail
]);
$request->file('image')->store($request->title.'/image');
$request->file('thumbnail')->store($request->title.'/thumbnail');
if($event) {
return response()->json('success');
}
return response()->json('An error accured');
}
这将请求FormData中的文件并将它们存储在存储文件夹中,并添加一个随机的哈希名称。所以这个:
$request->file('image')->store($request->title.'/image');
$request->file('thumbnail')->store($request->title.'/thumbnail');
例如将图像移动到该位置:
storage/app/dragon/thumbnail/abcaksdhsadui123.png // your request title is in this example dragon
storage/app/dragon/image/abcaksdhsadui123.png