頁面（前端）直傳oss（layui.js 不走後端）

一、什麼叫頁面（前端）直傳oss？

文件（jpg，png，tif.....）上傳，無非兩種情況：一種走後端處理，再上傳oss；還有就是今天要說的頁面直接上傳oss！

二、準備工作   算了還是直接上代碼吧！

 1、前端js代碼

         /**
         * @remark  原File上傳函數
         * @Time  19-8-23 15:23
         * @function fileUpload
         */
        
        var now = timestamp = Date.parse(new Date()) / 1000; 
        var expire = 0;
        var sign_obj='';
        var g_object_name ="";
        var infos;
        function fileUpload(file,e){
                get_signature();
                if(sign_obj == '') {
                   layer.msg('系統繁忙，請稍後', {icon: 2, time: 2000});
                   return false;
                }
                g_object_name=  sign_obj.key+guid()+e + get_suffix(file.name);  //文件名
                var request = new FormData();
                request.append("OSSAccessKeyId",sign_obj.accessid); //Bucket 擁有者的Access Key Id。
                request.append("policy",sign_obj.policy);             //policy規定了請求的表單域的合法性
                request.append("Signature",sign_obj.signature); //根據Access Key Secret和policy計算的簽名信息，OSS驗證該簽名信息從而驗證該Post請求的合法性
                request.append("key",g_object_name);            //文件名字，可設置路徑
                request.append("success_action_status",'200');  // 讓服務端返回200,不然，默認會返回204
                request.append('x-oss-object-acl', 'public-read');
                request.append('file', file);
                $.ajax({
                    url : sign_obj.host,  //上傳阿里地址
                    data : request,
                    processData: false,//默認true，設置爲 false，不需要進行序列化處理
                    cache: false,//設置爲false將不會從瀏覽器緩存中加載請求信息
                    async: false,//發送同步請求
                    contentType: false,//避免服務器不能正常解析文件---------具體的可以查下這些參數的含義
                    dataType: 'xml',//不涉及跨域  寫json即可
                    type : 'post',
                    success : function(callbackHost, request) {     //callbackHost：success,request中就是 回調的一些信息，包括狀態碼什麼的
                           
                            infos = {
                                    oldname:file['name'],
                                    filesize:file['size'],
                                    type:file['type'],
                                    file:g_object_name,
                            };
                    },
                    error : function(returndata) {
//                        console.log("return data:"+returndata);
                        layer.msg('系統出現異常，請稍後', {icon: 2, time: 2000});
                    }
                });
                return  JSON.stringify(infos);
                
        }
        
        /*獲取簽名信息驗證*/
        function get_signature(){
            //可以判斷當前expire是否超過了當前時間,如果超過了當前時間,就重新取一下。3s 做爲緩衝
            var  now = timestamp = Date.parse(new Date()) / 1000;
            if (expire < now + 3){
                var body = send_request();
                var obj =JSON.parse(body);
                if(obj.status ==1  && obj.data.code == 1){
                    sign_obj= obj.data;
                    expire= parseInt(sign_obj['expire']);
                    return true;
                }
                return true;
            }
            return false;
        };
        /**
         * @remark 獲取上傳的sign
         * @Time 19-8-23 16:03
         */ 
        function send_request(){
            var xmlhttp = null;
            if (window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject)
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xmlhttp!=null)
            {
                var serverUrl = '/XXX/XXXXXX/getSignature';
                xmlhttp.open( "GET", serverUrl, false );
                xmlhttp.send( null );
                return xmlhttp.responseText ;
            }else{
                alert("您的瀏覽器不支持XMLHTTP，請換個瀏覽器上傳");
            }
        };
        /**
         * @remark 獲取文件後綴名
         * @function get_suffix
         * @Time  19-8-23 16:09
         */
        function get_suffix(filename) {
            var pos = filename.lastIndexOf('.')
            var suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        }
        /**
         * get  guid
         */
        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                return v.toString(16);
            });
        }

 2、後端獲取簽名代碼

public function ossFileUploadinfoCustom($dir){
            $id= config('oss.accessKeyId');
            $key= config('oss.accessKeySecret');
            $host = config('oss.host');
            $now = time();
            $expire = 30; //設置該policy超時時間是10s. 即這個policy過了這個有效時間，將不能訪問
            $end = $now + $expire;
            $expiration = gmt_iso8601($end);
            $dir = $dir;   // 文件目錄

            //最大文件大小.用戶可以自己設置
            $condition = 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();
            $response['accessid'] = $id;
            $response['host'] = $host;
            $response['policy'] = $base64_policy;
            $response['signature'] = $signature;
            $response['expire'] = $end;
            $response['key'] = $dir;
            $response['code']=1;
            return json_encode(['data'=>$response,'status'=>1]);
        }

3、對了，你得先設置oss的一些參數！