javascript - Laravel 从表单数据保存图像

Question

我正在尝试将从我的 javascript(使用 vue)发送的图像保存为表单数据，我正在尝试将其正确保存到我的数据库并在我的存储目录中创建一个文件夹。

到目前为止，我做了以下事情:

// 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);
        })
    }
},

在我的 Controller 的存储方法中，我执行以下操作:

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');
}

在我的 Repository 中创建的 createDir 方法

public function createDir($image, $thumbnail, $title)
{
    $image->store($title.'/image');
    $thumbnail->store($title.'/thumbnail');
}

Axios 帖子有效。$request->file('image') 和 $request->file('thumbnail') 返回 null 而如果我在控制台中输出表单数据，我会得到一个正确的日志。

我想将文件名保存在我的数据库中，并在存储空间中创建一个包含两张图片的文件夹。

我不确定如何使用 FormData 进行管理。

Answer 1

只需将您的存储方法更新为以下内容:

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