1、定義路由

// 阿里雲檔案儲存
Route::group(['prefix'=>'aliyun'],function(){
    Route::get('sign','AliyunController@sign');
}); 

2、編寫 controller 層

/**
     * 返回OSS的簽名驗證
     * @return ON 簽名信息
     */
    public function sign(Request $request)
    {
        //初始化一下必要的請求資料
        $id = 'xxx';   //AccessKeyId
        $key = 'xxx';  //AccessKeySecret
        $host = '//xxx.oss-cn-shenzhen.aliyuncs.com';  //OSS庫地址
        $cdn_host = "//img.xxx.com"; //真實的訪問地址
        $dir = 'test/';  //上傳目錄設定
        $callbackUrl = url('upload/callback');  //上傳回調的地址

        //上傳回調的引數,callbackUrl地址,callbackBody回撥接收的引數,callbackBodyType通過POST呼叫的回撥函式,所以要設定這個頭
        $callback_param = array(
            'callbackUrl' => $callbackUrl,'callbackBody' => 'filename=${object}&size=${size}&mimeType =${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}','callbackBodyType' => "application/x-www-form-urlencoded"
        );
        $callback_string = json_encode($callback_param);  //轉換成json格式
        $base64_callback_body = base64_encode($callback_string); //要返回的回撥函式引數資訊

        //設定過期時間
        $now = time();
        
        $expire = 60 * 60 * 2; //設定該policy超時時間是 2小時. 即這個policy過了這個有效時間，將不能訪問，這裡可以根據自己的token過期時間來設定
        $end = $now + $expire;
        $expiration = $this->gmt_iso8601($end);  //進行時間格式的轉換


        //處理上傳限制條件
        //最大檔案大小.使用者可以自己設定
        $condi
 
tion = array(0 => 'content-length-range',1 => 0,2 => 1048576000);
        $conditions[] = $condition; //設定檔案大小
        //表示使用者上傳的資料,必須是以$dir開始,不然上傳會失敗,這一步不是必須項,只是為了安全起見,防止使用者通過policy上傳到別人的目錄
        $start = array(0 => 'starts-with',1 => '$key',2 => $dir);
        $conditions[] = $start;  //必須以設定的目錄開頭,防止上傳錯誤
        $arr = array('expiration' => $expiration,'conditions' => $conditions);
        $policy = json_encode($arr);
        $base64_policy = base64_encode($policy);  //要返回的上傳限制引數

        //簽名信息
        $string_to_sign = $base64_policy;
        $signature = base64_encode(hash_hmac('sha1',$string_to_sign,$key,true));  //要返回的簽名信息

        //設定返回資訊
        $response = array(
            'accessid' => $id,//accessid
            'host' => $host,//上傳地址
            'cdn_host' => $cdn_host,//真實的訪問地址
            'policy' => $base64_policy,//上傳檔案限制
            'signaturewww.cppcns.com
 
' => $signature,//簽名信息
            'expire' => $end,//失效時間
            'callback' => $base64_callback_body,//上傳回調引數
            'dir' => $dir     //上傳的目錄
        );
        return response()->json([
            'code' => 0,'msg' => 'success','data' => $response
        ]);
    }

    //格式化時間,格式為2020-07-07T23:48:43Z
    public function gmt_iso8601($time)
    {
        $dtStr = date("c",$time);
        $pos = strpos($dtStr,'+');
        $expiration = substr($dtStr,$pos);
        return $expiration . "Z";
    }

3、檢視介面返回

4、前端介面及操作編寫，這裡採用的是

<template>
    <div class="test" style="padding:100px 0px 1000px 0px;">
        <div>
                
            <input type="file" id="file" name="file" />
            <a @click="upload()" href=":;" rel="external nofollow" >上傳</a>

        </div>
    </div>
</template>



<script>
export default {
    data(){
        return {

        }
    },mounted() {
    
        this.getOssToken();
    },methods: {
        //獲取上傳通行證
        getOssToken(){
            var _self = this;
             this.axios.get('/aliyun/sign').then((res)=>{
                var data = res.data;
                if(data.code==0){   
                    _self.aliyunOssToken = data.data;
                }else{
                    _self.$message.warning(data.msg);
                }
            })http://www.cppcns.com;
        },upload(){
            var _self = this;
            var getSuffix = function (fileName) {
                var pos = fileName.lastIndexOf(".");
                var suffix = '';
                if (pos != -1) {
                    suffix = fileName.substring(pos);
                }
                return suffix;
            }

            var file = $("#file").val();
            if (file.length == 0) {
                alert("請選擇檔案");
            }

            var oFileName = file.lastIndexOf('\\');
            var oFileName = file.substr(oFileName+1);
            var fileName = oFileName.lastIndexOf('.');
            var fileName = oFileName.substr(0,fileName);

            console.log(fileName);


            var filename = new Date().getTime() + getSuffix(file);
            var formData = new FormData();

            //注意formData裡append新增的鍵的大小寫
            formData.append('key',_self.aliyunOssToken.dir + filename); //儲存在oss的檔案路徑
            formData.append('OSSAccessKeyId',_self.aliyunOssToken.accessid); //accessKeyId
            formData.append('policy',_self.aliyunOssToken.policy); //policy
            formData.append('S客棧ignature',_self.aliyunOssToken.signature); //簽名
            formData.append("file",$("#file")[0].files[0]);
            formData.append('success_action_status',200); //成功後返回的操作碼


            var url = _self.aliyunOssToken.host;
            var fileUrl = _self.aliyunOssToken.cdn_host +'/'+ _self.aliyunOssToken.dir + filename;
            $.ajax({
                url: url,type: 'POST',data: formData,// async: false,cache: false,contentType: false,processData: false,success: function (data) {
                    console.log(fileUrl);
                    console.log(data);
                },error: function (data) {
                    console.log(data);
                }
            });
        }
    }
}
</script>

5、點選上傳按鈕，瀏覽器控制檯輸出連結，訪問該連結，即可看到該圖片

到此這篇關於laravel 實現阿里雲oss檔案上傳功能的示例的文章就介紹到這了,更多相關laravel 阿里雲oss檔案上傳內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！