Laravel8集成阿里OSS多图片批量上传并返回url

1.安装扩展包jacobcyl/ali-oss-storage": "^2.1

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

2.然后在 config/app.php 文件中注册 Jacobcyl\AliOSS\AliOssServiceProvider :

'providers' => [
    // Other service providers...
    Jacobcyl\AliOSS\AliOssServiceProvider::class,
],

3.然后需要在 config/filesystems.php 文件中的 disks 中添加 OSS 的配置信息

  'disks' => [
        'qiniu' => [
           'driver'     => 'qiniu',
           'access_key' => env('QINIU_ACCESS_KEY'),
           'secret_key' => env('QINIU_SECRET_KEY'),
           'bucket'     => env('QINIU_BUCKET'),
           'domain'     => env('QINIU_DOMAIN'),
        ],
        'oss' => [
            'driver'        => 'oss',
            'access_id'     => env('ALIYUN_ACCESS_ID'),
            'access_key'    => env('ALIYUN_ACCESS_KEY'),
            'bucket'        => env('ALIYUN_BUCKET'),
            'endpoint'      => env('ALIYUN_ENDPOINT'),
            'cdnDomain'     => env('ALIYUN_CDN_DOMAIN'),
            'ssl'           => env('ALIYUN_SSL'),
            'isCName'       => env('ALIYUN_IS_CNAME'),
            'debug'         => env('ALIYUN_DEBUG')
        ],

4.然后在 .env 文件中进行配置

FILESYSTEM_DRIVER=oss
ALIYUN_ACCESS_ID=
ALIYUN_ACCESS_KEY=
ALIYUN_BUCKET=//列表块名称
ALIYUN_ENDPOINT=自定义域名加http 如http://image.xxx.com
ALIYUN_CDN_DOMAIN=自定义域名加http 与上一个参数一样
ALIYUN_SSL=false
ALIYUN_IS_CNAME=true
ALIYUN_DEBUG=false

5.写service层的服务

<?php
namespace App\Service\AliyunOss;

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\File;
class AliOss
{
    /***
     * 阿里云OSS上传
     * @param $path 阿里云oss上的路径 自己填写
     * @param $file file[]表单接受到的文件
     * @param string $drive
     */
    public static function aliOss($path, $file, $drive = 'oss')
    {
        //设置存储引擎
        $disk = Storage::disk($drive);
        try{
            //多文件 单文件上传
            foreach ($file as $key=>$value)
            {
                //文件上传返回url
                $data=$disk->putfile($path,$value);
                //多图片url存到数组
                $dataPath[] =$data;
            }
        }catch (\Exception $e){
			return '上传失败';
        }
        //返回单图片或多图片路径
        //图片路径加域名
        foreach ($dataPath as $value)
        {
            $filePath[] = env('ALIYUN_CDN_DOMAIN').'/'.$value;
        }
        return $filePath;

    }
}

6.Controller文件

<?php

namespace App\Http\Controllers\Admin;

use App\Service\AliyunOss\AliOss;
use App\Common\SuccessBaseObj;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Validator;

/**
 * Class AliyunOssController
 * @package App\Http\Controllers\Admin
 * 多图上传阿里OSS例子
 */
class AliyunOssController extends Controller
{
    public function file(Request $request)
    {
        $file = $request->file('file');
        $validate = Validator::make($file,['required|image|max:153600']);
        if($validate->fails()){return $this->fail($validate->errors()->first());}
        //调用服务上传文件 接收返回的文件url路径
        $result=AliOss::aliOss('uploads/file/'.date('Ymd'),$file);
        return SuccessBaseObj::getSucObjByMsg($result);
    }
}

用postman测试
在这里插入图片描述
参考 https://blog.csdn.net/hl449006540/article/details/85015782
https://learnku.com/laravel/t/35638

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于 Node.js + Vue3 的上传图片阿里OSS返回在线 URL 的示例。 1. 安装依赖 ```bash npm install oss npm install multer ``` 2. 创建 OSS 实例 ```javascript const OSS = require('ali-oss'); const client = new OSS({ region: '<your region>', accessKeyId: '<your accessKeyId>', accessKeySecret: '<your accessKeySecret>', bucket: '<your bucket>', // 如果是外网访问,需要设置 endpoint,具体参考 OSS 官方文档 // endpoint: '<your endpoint>' }); ``` 3. 创建上传接口 ```javascript const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); // 指定上传文件保存的目录 app.post('/upload', upload.single('file'), async (req, res) => { try { const file = req.file; const result = await client.put(file.originalname, file.path); const url = result.url; // 获取上传后的文件 URL res.send({ url }); } catch (err) { console.error(err); res.status(500).send(err.message); } }); ``` 4. 在 Vue3 中调用上传接口 ```javascript const uploadFile = async (file) => { const formData = new FormData(); formData.append('file', file); const response = await axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); return response.data.url; } // 调用上传接口 const url = await uploadFile(file); console.log(url); ``` 注意事项: - 在调用 `put` 方法时,第一个参数是保存到 OSS 上的文件名,这里直接使用原始文件名即可。 - 在上传文件时,需要使用 `multipart/form-data` 的请求头,否则文件无法正确上传

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值