Laravel 链接存储到公共路径

在 Laravel 中，存储文件是常见的需求之一。Laravel 提供了 Storage 门面来管理所有这些存储的文件。在这篇文章中，我们将看看如何将文件上传到公共路径并将其链接返回到前端。

步骤

1. 配置公共磁盘

首先，我们需要为公共存储创建一个磁盘。我们可以在 config/filesystems.php 文件中定义一个新的磁盘来保存我们的文件。以下是基本配置：

'public' => [
    'driver' => 'local',
    'root' => public_path(),
    'url' => env('APP_URL').'/public',
    'visibility' => 'public',
],

2. 创建控制器和路由

接下来，我们需要创建一个控制器和路由来处理文件的上传和链接。在本例中，我们将使用 PhotoController 控制器。以下是示例代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class PhotoController extends Controller
{
    public function upload(Request $request)
    {
        $path = $request->file('photo')->store('public/photos');
        return response()->json(['url' => Storage::url($path)]);
    }
}

在上面的代码片段中，我们使用 store() 方法将文件上传到公共磁盘，并在成功时返回文件的 URL。

下面是该控制器和路由的完整代码：

Route::post('/photos', '\App\Http\Controllers\PhotoController@upload');

3. 创建表单

现在，我们需要创建一个表单来上传文件。这里使用了 axios 库来执行 POST 请求。以下是示例代码：

<div>
    <input type="file" name="photo" ref="photo" @change="upload" />
    <img :src="url" v-if="url" />
</div>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                url: null,
                photo: null
            };
        },
        methods: {
            async upload() {
                const formData = new FormData();
                formData.append('photo', this.$refs.photo.files[0]);

                const response = await axios.post('/photos', formData, {
                    headers: { 'content-type': 'multipart/form-data' }
                });

                this.url = response.data.url;
            }
        }
    };
</script>

在上面的代码中，文件将被提交到 /photos 路由，上传后的 URL 将在响应中返回，并使用 v-if 条件渲染在页面上。

结论

在本文中，我们了解了如何在 Laravel 中将文件上传到公共路径，并将其链接返回到前端。一个完整的示例可以在 GitHub 上找到。