laravel-admin上传图片至阿里OSS

        这篇博客将介绍如何使用laravel-admin上传图片至阿里OSS,博主之前也是搞过一回,今天将介绍如何进行操作(前提需要先安装composer)        

        一、安装相关扩展包

        电脑进入cmd命令模式,输入以下命令进入到我们网站目录(请自行替换网站目录):

cd E:\code\laravelTest

        然后输入以下命令安装:

composer require jacobcyl/ali-oss-storage:^2.1

       然后在config/app.php文件下的providers数组最后新增一列:

//阿里OSS
Jacobcyl\AliOSS\AliOssServiceProvider::class,

      二、配置基础配置

      在app/filesystems.php文件下的disks数组新增一项,如下:

'oss' => [
    'driver' => 'oss',
    'access_id' => 'Aliyun OSS AccessKeyId',         // 阿里云OSSAccessKeyId
    'access_key' => 'Aliyun OSS AccessKeySecret',    // 阿里云OSSAccessKeySecret
    'bucket' => 'OSS bucket name',                   // bucket名称 
    'endpoint' => 'EndPoint 域名',                   // OSS 外网节点或自定义外部域名
    'cdnDomain' => 'Bucket 域名',                    // 使用 cdn 时才需要写(Bucket 域名)
    'isCName' => true,                               // 为true时,cdnDomain必填
],

其中endpoint、cdnDomain分别为阿里oss概览中的EndPoint(地域节点)、Bucket域名。保存地址在bucket下的images文件夹下。

         然后将同文件下的:

'default' => env('FILESYSTEM_DRIVER', 'local'),

         修改为:

'default' => env('FILESYSTEM_DRIVER', 'oss'),

     三、修改默认上传配置

     修改config\admin.php文件下的upload配置如下:

'upload' => [

    // Disk in `config/filesystem.php`.
    'disk' => 'oss',

    // Image and file upload path under the disk above.
    'directory' => [
        'image' => 'images',
        'file'  => 'files',
    ],
],

这样我们就全部都配置完成

       这样laravel-admin上传图片就会将图片保存至阿里云OSS,而不会占用本地空间。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Element-UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件和交互功能。要实现在 Element-UI 上传图片阿里云 OSS,可以按照以下步骤进行: 1. 安装依赖:首先,需要安装 `ali-oss` 和 `element-ui` 的相关依赖。可以使用 npm 或者 yarn 进行安装。 2. 配置阿里云 OSS:在阿里云 OSS 控制台创建一个 Bucket,并获取 AccessKeyId、AccessKeySecret、Bucket 名称和 Endpoint。 3. 创建上传组件:在 Vue 组件使用 Element-UI 的 `el-upload` 组件来实现图片上传功能。可以设置 `action` 属性为阿里云 OSS 的上传地址,`before-upload` 属性来处理上传前的逻辑。 4. 在上传前进行签名:在 `before-upload` 方法,需要通过阿里云 OSS 的 SDK 进行签名操作,生成上传所需的参数。可以使用 `ali-oss` 库提供的 `put` 方法来进行签名。 5. 上传图片:在签名成功后,调用 `put` 方法将图片上传到阿里云 OSS。可以设置 `on-success` 属性来处理上传成功后的逻辑。 下面是一个简单的示例代码: ```vue <template> <el-upload action="https://your-bucket-name.oss-cn-hangzhou.aliyuncs.com" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" > <el-button>点击上传</el-button> </el-upload> </template> <script> import OSS from 'ali-oss'; export default { methods: { async handleBeforeUpload(file) { const client = new OSS({ region: 'your-region', accessKeyId: 'your-access-key-id', accessKeySecret: 'your-access-key-secret', bucket: 'your-bucket-name', }); try { const result = await client.put(file.name, file); // 在这里可以处理上传成功后的逻辑 } catch (error) { // 处理上传失败的逻辑 } // 返回 false 可以阻止上传 return false; }, handleUploadSuccess(response) { // 处理上传成功后的逻辑 }, }, }; </script> ``` 请注意,上述代码的 `your-region`、`your-access-key-id`、`your-access-key-secret` 和 `your-bucket-name` 需要替换为你自己的阿里云 OSS 相关信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

佛布朗斯基

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

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

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

打赏作者

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

抵扣说明:

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

余额充值