1

图片上传,以用户头像avatar为例

为节省本地磁盘,依托七牛的CDN节点加快访问,从而选择七牛的对象存储来保存avatar.
下述,以流程概述为主,据遇到的实际问题和需求来展开,仅列出关键代码。

技术基础

Laravel5.4.36+webuploader(异步上传)        //笔者环境如此

延伸

  • clipboard.png,也可在composer.lock中查看
  • clipboard.png

普通上传的实现

    public function webUpload(Request $request){
        //1.是否有文件上传及上传文件的有效性判断(file,是webUploader插件用来接收文件的)
        if ($request->hasFile('file') && $request->file('file')->isValid()) {

            $newFileName =  md5($request->file('file')->getClientOriginalName() . time())
                            . '.'
                            . $request->file('file')->getClientOriginalExtension();

            //2.保存到该磁盘(为啥?通过检查/storage目录的.gitignore,了解到该目录下的文件才能被提交;且在软链接的配置后可直接访问)
            //文件名重复就会覆盖=>因此要回到上一步=>自定义文件名 $newFileName
            Storage::disk('public')->put($newFileName, File::get($request->file('file')->path()));//Storage门面确认存储位置,File门面获取文件全部内容

            //3.返回结果
            return [            //laravel中会自动处理,返回成json数据
                'code' => 1,
                'message' => '文件上传成功',
                //4.返回的必须是/public下可直接访问的图片地址.
                //因laravel中站点是直接指向/public的,因此图片也要在/public下才可以(而如前所设,图片被保存在了/storage/app/public)
                //=>此时可通过软链接配置来达到快捷访问的效果
                'path' => '/storage/' . $newFileName
            ];
        }
        return [
            'code' => 0,
            'message' => $request->file('file')->getErrorMessage(),
        ];
    }

简要说明

  • 软链接配置
php artisan storage:link


命令参考及最后效果

clipboard.png

clipboard.png

  • 普通上传代码中,提及的图片保存的实际路径
    clipboard.png

如上步骤,既已实现本地磁盘的存储,那么七牛上传就不在话下了.只不过是换了个保存图片的地址而已.

七牛上传的实现

1.如上所述,已实现了avatar的普通上传。七牛上传,则在该代码基础上来修改.
2.用七牛=>注册七牛=>选择并新建对象存储空间=>从而得到[空间名字和测试域名]

官网 https://www.qiniu.com/

图示一:新建
clipboard.png

图示二:查询
clipboard.png

3.借助第三方集成的SDk来处理上传

https://github.com/zgldh/qini...

clipboard.png

4.修改普通上传的代码,有两处:

  • 存储位置

       Storage::disk('qiniu')->put($newFileName, File::get($request->file('file')->path()));
  • 返回图片地址

    'path' => Storage::disk('qiniu')->getDriver()->downloadUrl($newFileName),    //这里要返回的是七牛云存储的图片的路径(第三方提供的文档中查找可用方法)

5.响应数据的检查

clipboard.png

6.html中一并提交该图片的返回地址到DB,那么DB中就可查看到相关信息了


Lin945
211 声望6 粉丝

技术沉淀还是很有必要的,尽量多写写。