Laravel8.x使用overtrue/laravel-filesystem-qiniu上传图片到七牛云
作者:温新
时间:2021-07-26
hi,我是温新,一名PHPer
此篇文章使用Laravel8.x上传文件(图片)到七年牛。之前是有记录过基于另外一个第三方扩展包的用法,详情可以参考 Laravel6.x上传图片到七牛云 这篇文章。
Laravel8.x将使用overtrue/laravel-filesystem-qiniu
这个扩展来记录上传图片到七牛云。从github
来看,这个包很长时间没有更新。我是基于Laravel8.x来使用,目前没有发现问题。
准备工作
1)准备好七牛云账号;
2)购买好对象存储服务;
3)创建对象窗口空间;
4)域名绑定,也可以使用临时提供的。我创建的是域名绑定,访问图片时,路径将会是使用我的域名。
安装overtrue/laravel-filesystem-qinniu
第一步:安装
$ composer require "overtrue/laravel-filesystem-qiniu"
第二步:配置
文件位置:config/app.php
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'providers'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// Other service providers...</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Overtrue\LaravelFilesystem\Qiniu\QiniuStorageServiceProvider</span>::<span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">],</span>
文件位置:config/filesystems.php
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><?</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'disks'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//...</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'qiniu'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'driver'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'qiniu'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'access_key'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">env</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'QINIU_ACCESS_KEY'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'xxxxxxxxxxxxxxxx'</span>),</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'secret_key'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">env</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'QINIU_SECRET_KEY'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'xxxxxxxxxxxxxxxx'</span>),</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'bucket'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">env</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'QINIU_BUCKET'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'test'</span>),</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'domain'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">env</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'QINIU_DOMAIN'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'xxx.clouddn.com'</span>), <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// or host: https://xxxx.clouddn.com</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> ],</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">//...</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> ]</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">];</span>
上传图片到七牛云
注意:这一步我是在项目中操作的,因此本地并未实际测试,但操作都是一样的。
第一步:配置七牛云信息
文件:env
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">QINIU_ACCESS_KEY</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(51, 0, 170)">key</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">QINIU_SECRET_KEY</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">secket</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">QINIU_BUCKET</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">七牛对象存空间名</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)"># 注意,必须携带 http://或https://</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">QINIU_DOMAIN</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">https</span>:<span style="box-sizing: border-box;color: rgb(170, 85, 0)">//www.ziruchu.com</span></span>
第二步:配置路由
文件位置:routes/web.php
Route::post('art/upload','ArticleController@upload');
第三步:控制器方法
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Illuminate\Support\Facades\Storage</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 图片上传</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">upload</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">Request</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">isMethod</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'POST'</span>)) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 判断有文件上传且文件上传成功</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">hasFile</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'file'</span>) <span style="box-sizing: border-box;color: rgb(152, 26, 26)">&&</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(51, 0, 170)">file</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'file'</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">isValid</span>()) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 获取上传文件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$file</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$request</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(51, 0, 170)">file</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'file'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 获取文件后缀</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$ext</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$file</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">getClientOriginalExtension</span>();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 获取上传文件大小</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$size</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$file</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">getSize</span>();</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 允许文件上传格式</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$allowExt</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> [<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'jpg'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'jpeg'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'gif'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'png'</span>];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 允许文件上传大小</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$allowSize</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1024</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">*</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1024</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 新文件名</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$newFileName</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">date</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'Ymd'</span>) . <span style="box-sizing: border-box;color: rgb(51, 0, 170)">rand</span>(<span style="box-sizing: border-box;color: rgb(17, 102, 68)">100000</span>, <span style="box-sizing: border-box;color: rgb(17, 102, 68)">999999</span>) . <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'.'</span> . <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$ext</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(152, 26, 26)">!</span><span style="box-sizing: border-box;color: rgb(51, 0, 170)">in_array</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$ext</span>, <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$allowExt</span>)) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> [<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'code'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">400</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'非法文件上传'</span>];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$size</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$allowSize</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> [<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'code'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">401</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'上传文件过大'</span>];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 将图片上传到七牛云</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$result</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Storage</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">disk</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'qiniu'</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">writeStream</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$newFileName</span>,<span style="box-sizing: border-box;color: rgb(51, 0, 170)">fopen</span>(<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$file</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">getRealPath</span>(),<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'r'</span>));</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> (<span style="box-sizing: border-box;color: rgb(0, 85, 170)">$result</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> [<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'code'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">200</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'msg'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'文件上传成功'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'filePath'</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> <span style="box-sizing: border-box;color: rgb(0, 85, 170)">$newFileName</span>];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
这段上传代码会很熟悉,Laravel学习笔记基础系列--(十一)Laravel上传文件 这篇文章就是,几乎可以直接拿来就用。
第四步:前端界面使用
文件:edit.blade.php
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"layui-upload-list"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">img</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"layui-upload-img"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">src</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"{{env('QINIU_DOMAIN') . '/'.</span><span style="box-sizing: border-box;color: rgb(0, 85, 170)">$art</span>-><span style="box-sizing: border-box;color: rgb(0, 0, 0)">thumb</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">}}"</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">id</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"demo1"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">id</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"demoText"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">p</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span>
基础操作到这里就结束了。以后要用到了,直接过来拿,岂不是很方便!
我是温新
每天进步一点点,就一点点
请登录后再评论