Laravel5.7 使用 AliyunOSS 上傳

DouYar發表於2018-10-17
Laravel

物件儲存 ( Object Storage Service, 簡稱 OSS ) OSS 相信大家都聽過, 它是阿里雲對外提供的海量, 安全和高可靠的雲端儲存服務. 大家可以把自己網站的資源存上面加快自己網站速度, 阿里雲 官網也有文件不過對於新手來說有點難, 那麼這裡我給大家推薦一個元件和元件的使用.

這裡使用到的前端上傳元件layui 上傳aliyun元件使用的是johnlui/AliyunOSS

安裝

composer require johnlui/aliyun-oss:~2.0

構建 Service 檔案

新建 app/services/OSS.php 內容可參考: OSS.php，只需要修改下面的資訊,變成自己的阿里雲AccessKeyId AccessKeySecret即可

    private $city = '青島';
    private $networkType = '經典網路';
    //此處修改成成阿里雲的AccessKeyId  AccessKeySecret
    private $AccessKeyId = '';
    private $AccessKeySecret = '';
    private $ossClient;

放入自動載入

在 composer.json 中 autoload -> classmap 處增加配置：

"autoload": {
    "classmap": [
      "app/services"
    ]
  }

然後執行 composer dump-autoload。

獲取檔案路徑

建立控制器類 Util/UploadController 控制器用於接收前臺上傳的圖片,上傳到阿里雲OSS,並且拿到返回路徑,需要注意的是下面程式碼中publicUpload getPublicObjectURL方法後面第一個引數要換成阿里雲OSS Bucket名稱即可.

namespace App\Http\Controllers\Util;

use App\Http\Controllers\Controller;
use App\Services\OSS;
use Illuminate\Http\Request;

class UploadController extends Controller
{

    public function upload(Request $request)
    {
        //獲取上傳的檔案
        $file = $request->file('file');
        //獲取上傳圖片的臨時地址
        $tmppath = $file->getRealPath();
        //生成檔名
        $fileName = str_random(5) . $file->getFilename() . time() .date('ymd') . '.' . $file->getClientOriginalExtension();
        //拼接上傳的資料夾路徑(按照日期格式1810/17/xxxx.jpg)
        $pathName = date('Y-m/d').'/'.$fileName;
        //上傳圖片到阿里雲OSS
        OSS::publicUpload('Bucket名稱', $pathName, $tmppath, ['ContentType' => $file->getClientMimeType()]);
        //獲取上傳圖片的Url連結
        $Url = OSS::getPublicObjectURL('Bucket名稱', $pathName);
        // 返回狀態給前端，Laravel框架會將陣列轉成JSON格式
        return ['code' => 0, 'msg' => '上傳成功', 'data' => ['src' => $Url]];
    }
}

前端Layui程式碼

我們使用的Laravel框架請求需要攜帶令牌所以我們需要在header和js上攜帶令牌,獲取到後端return的返回介面可以在res接收返回的阿里雲地址,建立form表單將res返回的地址使用jquery改變input的值,並且觸發提交

<meta name="csrf-token" content="{{ csrf_token() }}">
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通圖片上傳
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '{{route('util.upload')}}'
                , accept: 'images'
                , before: function (obj) {
                    //預讀本地檔案示例，不支援ie8
                    obj.preview(function (index, file, result) {
                        $('#icon').attr('src', result); //圖片連結（base64）
                    });
                }
                , done: function (res) {
                    //如果上傳失敗
                    if (res.code > 0) {
                        return layer.msg('上傳失敗');
                    }
                    //上傳成功
                    if (res.code == 0) {
                        console.log(res.data.src);
                        $('#iconUrl').val(res.data.src);
                        $('#saveIcon').submit()
                    }

                }
                , error: function () {
                    //演示失敗狀態，並實現重傳
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>

注意

1.OSS.php 檔案中 private $city = '青島'; 所對應的城市,要根據自己OSS相對應的地區所選擇，如何檢視自己的OSS地區,請到阿里雲OSS中檢視,修改錯誤會導致無法連線到阿里雲OSS伺服器

2.使用homestead 小夥伴需要把config/app檔案中 timezone 修改成 PRC

'timezone' => 'PRC',

相關文章