laravel上传(laravel上传文件显示进度)

《laravel上传(laravel上传文件显示进度)》

简述解决方案

在Laravel中实现文件上传并显示进度，可以通过多种方式来达成。其中一种较为常见的方案是利用HTML5的File API结合JavaScript（如Axios库）进行前端处理，同时配合Laravel后端的相应配置来接收文件并返回进度信息。

一、基于HTML5和Axios的方式

前端代码

html
<!-- HTML部分 -->
</p>

<div id="progressBar"></div>

<p><button id="uploadBtn">上传</button></p>




    document.getElementById('uploadBtn').addEventListener('click', function () {
        let file = document.getElementById('fileInput').files[0];
        let formData = new FormData();
        formData.append('file', file);

        axios.post('/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: function (progressEvent) {
                let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                document.getElementById('progressBar').innerText = percentCompleted + '%';
            }
        }).then(function (response) {
            console.log(response.data);
        }).catch(function (error) {
            console.error(error);
        });
    });


<p>

后端代码

php
// 在路由文件web.php中定义路由
Route::post('/upload', [FileController::class, 'upload']);</p>

<p>// FileController.php文件中的upload方法
public function upload(Request $request)
{
    if ($request->hasFile('file')) {
        $file = $request->file('file');
        // 可以根据需求对文件进行验证等操作
        // 将文件存储到指定位置
        $path = $file->store('uploads');
        return response()->json(['message' => '上传成功', 'path' => $path]);
    } else {
        return response()->json(['message' => '没有文件'], 400);
    }
}

二、使用Laravel - Upload - Progress包

这种思路是借助第三方包来简化开发过程。
通过composer安装该包：
composer require anlutro/laravel-upload-progress
然后按照包的文档进行相应的配置，如设置中间件等。在前端同样可以利用JavaScript监听上传进度，而后端会根据包的功能自动处理一些与进度相关的事情，并且可以在控制器中获取进度信息并返回给前端。

无论是哪种方式，在实际项目中都需要根据项目的具体情况（如安全性要求、兼容性要求等）来选择合适的方法实现文件上传并显示进度。