接入阿里云OSS

一般在开发中,是不会把文件资源放到自己的服务器上,
因为,服务器上的资源比较贵,而且在上传文件中会大量占用服务器资源,
所以,一般都是把文件上传到第三方平台
我这里使用的是阿里云OSS,因为他这个安全可靠,而且,价格也相对便宜,是一个不错的选择

首先,去阿里云找到对象存储OSS,首次打开会提示你让你开通,直接开通就好了
开通成功后,会有这个页面
在这里插入图片描述
然后新建一个Bucket
在这里插入图片描述
注:如果你使用的也是阿里云,最好选和你服务器一样的地区,那样,会帮你节约流量和资源。
如果,一般的读写权限选公共读
在这里插入图片描述

新建成功后,会有这个页面,那么就是创建好了
在这里插入图片描述
然后需要去权限管理里面去设置一下跨域问题
在这里插入图片描述
新建一个规则
在这里插入图片描述

这个来源可以使用通配符*
允许的method方法一般是post
header头也是使用*

在这里插入图片描述

然后去阿里云提供文档
地址 https://help.aliyun.com/document_detail/31925.html

然后找到JavaScript客户端签名直传,去下载一下官方提供的demo文件
在这里插入图片描述
下载完成后,会有这些文件
在这里插入图片描述
去配置一下js文件,
这些都是要去配置的,那么,哪里可以拿到这些秘钥呢?
在这里插入图片描述
去阿里云控制台,打开AccessKey
在这里插入图片描述

打开之后会显示
在这里插入图片描述

务必不得使用主AccessKey,也不得以任何方式公开,这会非常危险
要使用就使用子用户AccessKey

首先,会看到这个页面
在这里插入图片描述
这是一个典型的curd页面,为了简单一点,直接去创建一个用户
登录名称和显示名称随便填写,然后访问方式,选Open Api的方式,因为,我们只是要用这个子用户去使用阿里云的OSS的API而已,
在这里插入图片描述

添加完成后,会有这个页面
在这里插入图片描述
我们去为这个用户添加权限
权限需要添加上这个
在这里插入图片描述

配置好这些,我们去到我们下载的demo中,打开demo示例网页
在这里插入图片描述
然后我们就这个正常的把文件上传到阿里云OSS中了,
这个是没有经过我们的服务器进去处理的,也就是说,这个并没有去消耗我们的服务器资源,但是,这种操作就把我们的key暴露在外面了,来,看看,
在这里插入图片描述
这样是非常危险的,所以,我们需要去服务端处理这个事情

首先,去packagist找到laravel处理oss的插件,
在这里插入图片描述
安装命令:

composer require "iidestiny/laravel-filesystem-oss"

然后,在config/filesystems.php 配置文件中添加你的新驱动

'oss' => [
            'driver' => 'oss',
            'root' => '', // 设置上传时根前缀
            'access_key' => env('OSS_ACCESS_KEY'),//阿里云的key
            'secret_key' => env('OSS_SECRET_KEY'),//阿里云的secret
            'endpoint'   => env('OSS_ENDPOINT'), // 使用 ssl 这里设置如: https://oss-cn-beijing.aliyuncs.com
            'bucket'     => env('OSS_BUCKET'),
            'isCName'    => env('OSS_IS_CNAME', false), // 如果 isCname 为 false,endpoint 应配置 oss 提供的域名如:`oss-cn-beijing.aliyuncs.com`,否则为自定义域名,,cname 或 cdn 请自行到阿里 oss 后台配置并绑定 bucket
            // 如果有更多的 bucket 需要切换,就添加所有bucket,默认的 bucket 填写到上面,不要加到 buckets 中
            'buckets'=>[
                'test'=>[
                    'access_key' => env('OSS_ACCESS_KEY'),
                    'secret_key' => env('OSS_SECRET_KEY'),
                    'bucket'     => env('OSS_TEST_BUCKET'),
                    'endpoint'   => env('OSS_TEST_ENDPOINT'),
                    'isCName'    => env('OSS_TEST_IS_CNAME', false),
                ],
                //...
            ],
        ],

添加到disks数组里面
在这里插入图片描述

看他们就知道,他们都要另外在.env文件中去配置
在这里插入图片描述
值得注意的是,这里的OSS_BUCKET_URL是这个域名了
在这里插入图片描述

接下来,我们需要去使用一个控制器去生成token,
首先,定义一个路由

 //阿里云OSS
 $api->get('oss/token', [\App\Http\Controllers\Auth\OssController::class, 
 'token']);

然后在控制器中

public function token()
    {
        //选择磁盘使用
        $disk = Storage::disk('oss');
        /**
         * 1. 前缀如:'images/'
         * 2. 回调服务器 url
         * 3. 回调自定义参数,oss 回传应用服务器时会带上
         * 4. 当前直传配置链接有效期
         */
        $config = $disk->signatureConfig($prefix = '/', $callBackUrl = '', $customData = [], $expire = 300);
        //将数据转换成数组
        $configArr = json_decode($config, true);
        return $this->response->array($configArr);
    }

好了,现在就可以生成token了
在这里插入图片描述
生成的这些数据是用在我在官方下载的demo的js文件中的

首先,我们的accessid和accesskey等都已经由后端生成好了,所以,在js中的配置就不需要了
删除

accessid= '';
accesskey= '';
host = '';

还要删除这些策略

var policyText = {
    "expiration": "2021-12-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了
    "conditions": [
    ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
    ]
};

var policyBase64 = Base64.encode(JSON.stringify(policyText))
message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;
var signature = Crypto.util.bytesToBase64(bytes);

然后,返回的数据都在function set_upload_param()函数中设置,
在这里插入图片描述

按照正常使用的话,是需要使用ajax来获取服务器返回的数据,但是,需要处理的东西还要很多,而且我也不会,所以,测试的话,先暂时使用固定的

现在,去阿里云看看我们的图片
在这里插入图片描述

仔细看一下可以知道,是地域节点的域名加上图片的名字(不包含后缀)去进行访问的
在这里插入图片描述

然后,我们可以把这个数据存储到我们的数据库中,就可以直接去使用这个图片了

例如:我们在上传文件的时候是可以获取文件名的,那么,就会把这个文件名存储到数据库,然后,我们可以去拼接

定义一个辅助函数

因为数据是配置在filesystems驱动中的,所以,使用config()去获取配置

if (!function_exists('oss_url')){
    function oss_url($key){
        return config('filesystems')['disks']['oss']['bucket_url'].'/'.$key;
    }
}

然后,就可以在返回数据的地方去使用这个拼接函数了
在这里插入图片描述

看,拼接成功
在这里插入图片描述

好了,到这里也就差不多了,等我写了ajax获取数据在更新下面的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小信啊啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值