Laravel从FormData保存图像

时间:2018-10-06 12:16:16

标签: javascript laravel vue.js form-data

我正在尝试将从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进行管理。

1 个答案:

答案 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