[开源项目] Laravel 图片上传组件,支持直传云存储

在传统的图片上传中,相比于先上传到服务器,再从服务器传到云存储来说,少了一步转发。从架构上来说,原来的上传都统一走网站服务器,上传量过大时,瓶颈在网站服务器,可能需要扩容网站服务器。采用表单上传后,上传都是直接从客户端发送到云存储。上传量过大时,压力都在云存储上,由云存储来保障服务质量。

Github: laravel-uploader

file

功能

  • 图片上传预览
  • 上传进度显示
  • 图片格式限制
  • 上传数量限制 
  • 精美的UI
  • 支持直传到云存储

安装

composer require sunnyshift/laravel-uploader

添加服务提供者

SunnyShift\Uploader\UploaderServiceProvider::class,

生成资源文件

php artisan vendor:publish --provider=SunnyShift\\LaravelUploader\\UploadServiceProvider

使用

  1. 添加上传组件到页面

    @uploader(['name' => 'avatar', 'max' => 3, 'accept' => 'jpg,png,gif'])
  2. 添加资源文件
    @uploader('assets')

    该组件依赖jQuery,所以在引入的资源文件的时候必须先引入jQuery

直传到云存储

目前支持的第三方云储存:
本地(local) 百度云(bos) 腾讯云(cos) 阿里云(oss) 七牛云(qiniu) 新浪云(scs) 又拍云(upyun)

其中的本地不算云存储,只是标识仍旧支持本地磁盘存储。

  • 青云的鉴权方式比较奇特所以暂时无法支持
  • UCloud的鉴权方式太复杂暂时不打算支持

1.配置

百度云:

'disks' => [
    'bos' => [
        'driver'       => 'bos',
        'access_key_id'    =>  'xxxxxxxxxx',
        'access_key_secret'   => 'xxxxxxxxxx',
        'bucket'       => 'xxx',
        'region'    =>  'gz'    //改成存储桶相应地域
    ],
]

腾讯云:

'cos' => [
        'driver'       => 'cos',
        'app_id'    =>  '123456789',
        'secret_id'   => 'xxxxxxxxxxx',
        'secret_key'   => 'xxxxxxxxxxx',
        'bucket'       => 'xxxxxxxxx',
        'region'    =>  'sh'    //改成存储桶相应地域
    ]

注意,腾讯云存储的时候不是以资源的访问路径存的,会加上appid和存储桶的参数。主要是腾讯云上传后没有返回资源的相对路径,而且这样的存储方式也是官方推崇的。

阿里云:

'oss' => [
        'driver'       => 'oss',
        'access_key'   => 'xxxxxxxxxx',
        'secret_key'   => 'xxxxxxxxxx',
        'bucket'       => 'xxxxx',
    ],

七牛云:

'qiniu' => [
        'driver'     => 'qiniu',
        'access_key' => 'xxxxxxxxxxxxxxxxxx',
        'secret_key' => 'xxxxxxxxxxxxxxxxxx',
        'bucket'     => 'xxxxxxxxxxxxxxxxxx',
        'domain'     => 'xxxxxxxxxxx'
    ],

新浪云:

'scs' => [
        'driver'       => 'scs',
        'access_key'    =>  'xxxxxx',
        'secret_key'   => 'xxxxxxx',
        'bucket'       => 'xxxxxxxx'
    ]

又拍云:

'upyun' => [
        'driver'     => 'upyun',
        'operator'   => 'xxxxx',
        'password'   => 'xxxxxx',
        'bucket'     => 'xxxxxx',
        'domain'     => 'xxxxxx',
        'form_api_secret'     =>  'xxxxx',
    ]

2.设置云储存

FILESYSTEM_DRIVER=qiniu

扩展

当然,你也可以拓展支持的云存储,很简单:

1.新增驱动

<?php
use SunnyShift\Uploader\Contracts\UploaderContract;

class MyStorage implements UploaderContract {
        /**
     * 请求url
     * @return string
     */
    public function url() : string;

    /**
     * 请求头
     * @return array
     */
    public function header() : array;

    /**
     * 请求体
     * @return array
     */
    public function params() : array;

    /**
     * 文件表单名
     * @return string
     */
    public function fileName() : string;

    /**
     * 响应的url的键.
     * @return string
     */
    public function responseKey() : string;
}

2.拓展

Uploader::extend('mystorage', function($app) {
    return new MyStorage();
});

3.使用

FILESYSTEM_DRIVER=mystorage

或者

Uploader::setAdapter('mystorage');

说明

自带的上传组件UI是按照WEUI的上传功能设计的,可能不能满足您业务的需求,那么您可以自行构建UI后再把一些请求参数传到前台。也很简单:

$data = Uploader::build($jsoned = true);

其中data包含实现SunnyShift\Uploader\Contracts\UploaderContract的所有参数,可以根据具体业务使用。

Github: laravel-uploader

微信与订阅号,欢迎关注 :smile:
file

博客地址

本帖由 Summer 于 1年前 加精
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 6

这个不错

1年前
gangpula

好东西

1年前
Aaron

请问下楼主, laravel 框架好像自身都带有 云存储 的功能,为什么你还有去开发一个这样的包呢?

1年前

这套转发是个好东西,避免服务器压力过大,但是上传鉴权你怎么控制呢?

11个月前

@仰望 实际上这是一个老大难的问题, 就算自己开发也会遇到这个问题. 比如七牛的, 上传需要的一个token, 而这个token可以设置有效期, 只要拿到了token在 有效期内都是可以随意传文件的, 这种情况在app场景更加常见.
该库的使用场景是定位在后台服务, 而后台都是需要登录的, 这样获取token的接口也应该部署在登陆后, 自然就不存在上传鉴权的问题了

11个月前
qianfan

想问下,上传后,本地的文件是不是应该删除掉?

4个月前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!