PHP 上傳文件至阿里雲OSS對象存儲

簡述

1、阿里雲開通對象存儲服務 OSS 並創建Bucket
2、下載PHP SDK至框架擴展目錄，點我下載
3、碼上code

阿里雲操作

開通對象存儲服務 OSS

創建 Bucket

配置AccessKey與Access Key Secret

進入管理AccessKey頁面 (可將鼠標放在右上角用戶頭像上，在彈出來的框中點擊AccessKey 管理)

找到Bucket對應的外網訪問節點

下載 PHP SDK

點我下載

SDK 參考

API參考

SDK 下載完成后放入框架對應的擴展目錄

上碼

config配置

//阿里雲OSS配置
'alioss'        =>[
    'AccessKeyID'      => 'AccessKey ID',
    'AccessKeySecret'  => 'Access Key Secret',
    'EndPoint'   => '外網訪問地域節點',
    'Bucket'     => 'Bucket 名稱', 
],

后端結合SDK實現文件上傳至阿里雲OSS

以ThinkPHP5為例

<?php
namespace app\controller;

use think\Controller;
use think\Image;

require_once APP_PATH . '/../extend/aliyun-oss/autoload.php'; //引入阿里雲OSS SDK，注意替換路徑
use OSS\Core\OssException;
use OSS\OssClient;

class AliOssUpload
{

    /**
     * 文件上傳接口
     * 
     */
    public function uploadFile()
    {
        //接收上傳文件
        $file = $this->request->file('file');
        $res = [];
        if($file){
            //調用阿里雲OSS上傳
            $res = self::AliuploadFile('img', $file);
            if ($res['code'] == 200) {
                //業務邏輯處理......
            }
        }else{
            $res['code']=0;
            $res['msg']='沒有上傳文件';
        }
        return json($res);
    }

    /**
     * 調用阿里雲OSS SDK
     * @param $module 模塊
     * @param $file 上傳的文件
     * @return array 阿里雲OSS上傳處理結果
     * 
     */
    public static function AliuploadFile($module, $file)
    {
        $resResult = Image::open($file);
        try {
            //獲取OSS參數值
            $KeyId = config('alioss.AccessKeyID');
            $KeySecret = config('alioss.AccessKeySecret');
            $EndPoint = config('alioss.EndPoint');
            $Bucket = config('alioss.Bucket');
            //實例化
            $ossClient = new OssClient($KeyId, $KeySecret, $EndPoint);
            //sha1加密 生成文件名 連接后綴
            $fileName = $module . '/' . sha1(date('YmdHis', time()) . uniqid()) . '.' . $resResult->type();
            //執行阿里雲上傳
            $result = $ossClient->uploadFile($Bucket, $fileName, $file->getInfo()['tmp_name']);
            //圖片地址:$result['info']['url']
            $arr = ['code' => 200, 'msg' => '上傳成功', 'data' => $result['info']['url']];
        } catch (OssException $e) {
            $arr = ['code' => 0, 'msg' => $e->getMessage(), 'data' => ''];
        }
        return $arr;
    }
}

前端參考代碼

前端使用layui，謹慎參考

<div class="layui-upload" id="upload-thumb">
    <label class="layui-form-label">縮略圖</label>
    <button type="button" class="layui-btn" id="thumb">上傳圖片</button>
    <div class="layui-upload-list">
        <label class="layui-form-label"></label>
        <img class="layui-upload-img" id="demo1" width="150" height="150">
        <p id="demoText"></p>
    </div>
</div>




<script>
    //上傳圖片接口
    layui.use('upload', function(){
        var upload = layui.upload;
        //執行實例
        var uploadInst = upload.render({
            elem: '#thumb' //綁定元素
            ,url: "{:url('AliOssUpload/uploadFile')}" //上傳接口
            ,data:{use:'article_thumb'}
            ,done: function(res){
                //上傳完畢回調
                if(res.code == 200) {
                    //前台顯示預覽圖
                    $('#demo1').attr('src',res.data);
                    $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.data +'">');
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //請求異常回調
                //演示失敗狀態，並實現重傳
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
</script>